html {
  background: #050207;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;

  color: #f4eaff;

  font-family:
    Tahoma,
    Verdana,
    Arial,
    sans-serif;

  background:
    radial-gradient(
      circle at 10% 15%,
      rgba(203,89,255,0.32),
      transparent 28%
    ),

    radial-gradient(
      circle at 88% 12%,
      rgba(255,66,190,0.25),
      transparent 26%
    ),

    radial-gradient(
      circle at 75% 80%,
      rgba(68,120,255,0.23),
      transparent 34%
    ),

    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,0.018) 0px,
      rgba(255,255,255,0.018) 1px,
      transparent 1px,
      transparent 3px
    ),

    linear-gradient(
      135deg,
      #07030b 0%,
      #10061a 38%,
      #0c0820 68%,
      #050a16 100%
    );
}


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

.site-wrap {
  width: 95%;
  max-width: 1040px;

  margin: 0 auto;
  padding-bottom: 20px;
}


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

.xp-header {
  position: relative;

  text-align: center;

  padding: 30px 10px 15px;
}

.xp-header::before {
  content: "★  XP PERSONAL NETWORK  ★";

  display: block;

  margin-bottom: 5px;

  color: #9bf6ff;

  font-family: "Courier New", monospace;

  font-size: 0.58rem;
  font-weight: bold;

  letter-spacing: 3px;

  text-shadow:
    0 0 5px rgba(82,222,255,0.7);
}

.xp-header h1 {
  position: relative;

  margin: 0;

  font-size: 4.3rem;
  line-height: 1;

  font-weight: 900;
  letter-spacing: 8px;

  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #f4b8ff 18%,
      #d76aff 38%,
      #ff55c8 55%,
      #9f6cff 74%,
      #67a8ff 100%
    );

  -webkit-background-clip: text;

  color: transparent;

  filter:
    drop-shadow(0 0 4px rgba(255,255,255,0.25))
    drop-shadow(0 0 8px rgba(218,82,255,0.5));

  text-shadow:
    2px 2px 0 rgba(92,20,120,0.35);
}

.xp-header h1::after {
  content: "ONLINE // EST. 2026";

  position: absolute;

  right: 2px;
  bottom: -12px;

  color: #85ffc7;

  font-family: "Courier New", monospace;

  font-size: 0.48rem;
  letter-spacing: 1.5px;

  text-shadow:
    0 0 5px rgba(89,255,190,0.7);
}

.tagline {
  margin: 12px 0 0;

  color: #cfb8db;

  font-family: "Courier New", monospace;

  font-size: 0.63rem;
  letter-spacing: 5px;

  text-transform: uppercase;
}


/* =========================================================
   NAV
   ========================================================= */

nav {
  position: relative;

  margin-top: 24px;
  padding: 7px;

  background:
    linear-gradient(
      180deg,
      rgba(239,157,255,0.64) 0%,
      rgba(176,74,213,0.72) 18%,
      rgba(107,38,149,0.88) 62%,
      rgba(51,15,76,0.96) 100%
    );

  border-top: 2px solid #f9d7ff;
  border-left: 2px solid #d79bea;
  border-right: 2px solid #431655;
  border-bottom: 3px solid #2c0c3b;

  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.34),
    inset 0 -4px 8px rgba(27,0,42,0.55),
    0 0 12px rgba(211,79,255,0.28);
}

nav a {
  display: inline-block;

  margin: 3px;
  padding: 5px 10px;

  color: #ffffff;

  font-size: 0.69rem;
  font-weight: bold;

  letter-spacing: 1px;

  text-decoration: none;
  text-transform: uppercase;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.16),
      rgba(50,7,78,0.15)
    );

  border-top: 1px solid rgba(255,255,255,0.28);
  border-left: 1px solid rgba(255,255,255,0.13);
  border-right: 1px solid rgba(38,3,58,0.58);
  border-bottom: 1px solid rgba(38,3,58,0.75);
}

nav a:hover {
  color: #fff4a6;

  background:
    linear-gradient(
      180deg,
      rgba(255,93,211,0.55),
      rgba(91,28,153,0.68)
    );
}


/* =========================================================
   MAIN LAYOUT
   ========================================================= */

.main-layout {
  display: flex;
  align-items: flex-start;

  gap: 14px;

  margin-top: 16px;
}

.profile-column {
  width: 30%;
}

.content-column {
  width: 70%;
}


/* =========================================================
   PANELS
   ========================================================= */

.profile-box,
.contact-box,
.panel {
  position: relative;
  overflow: hidden;

  margin-bottom: 14px;
  padding: 14px;

  background:
    linear-gradient(
      120deg,
      rgba(255,255,255,0.10),
      transparent 20%
    ),

    repeating-linear-gradient(
      90deg,
      transparent 0px,
      transparent 31px,
      rgba(242,169,255,0.035) 32px,
      transparent 33px
    ),

    repeating-linear-gradient(
      0deg,
      transparent 0px,
      transparent 27px,
      rgba(111,167,255,0.035) 28px,
      transparent 29px
    ),

    linear-gradient(
      135deg,
      rgba(185,84,225,0.58),
      rgba(128,49,173,0.55) 30%,
      rgba(81,27,117,0.67) 63%,
      rgba(25,8,37,0.92)
    );

  border-top: 2px solid rgba(248,203,255,0.98);
  border-left: 2px solid rgba(204,132,238,0.95);
  border-right: 2px solid rgba(69,18,96,0.98);
  border-bottom: 3px solid rgba(38,7,56,0.98);

  box-shadow:
    inset 2px 2px 0 rgba(255,255,255,0.14),
    inset -4px -5px 10px rgba(22,0,35,0.44),
    inset 0 0 25px rgba(223,110,255,0.10),
    0 0 11px rgba(162,67,255,0.22);
}


/* =========================================================
   SCREWS
   ========================================================= */

.profile-box::after,
.contact-box::after,
.panel::after {
  content: "+";

  position: absolute;

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

  width: 9px;
  height: 9px;

  top: 5px;
  right: 6px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      #f4edf8,
      #a8a0ac 40%,
      #4b4250 72%,
      #1c1720
    );

  color: #514a56;

  font-family: Arial, sans-serif;
  font-size: 7px;

  pointer-events: none;
}


/* =========================================================
   PANEL HEADERS
   ========================================================= */

.profile-box h2,
.contact-box h2,
.panel h2 {
  position: relative;
  z-index: 3;

  margin: -14px -14px 12px;

  padding: 6px 9px;

  background:
    linear-gradient(
      180deg,
      #e989f2,
      #c94dd5 18%,
      #9e2bbb 57%,
      #651785
    );

  border-top: 1px solid #ffe2ff;
  border-bottom: 2px solid #4d0e68;

  color: #ffffff;

  font-size: 0.81rem;
  font-weight: 900;

  letter-spacing: 1.4px;
  text-transform: uppercase;

  text-shadow:
    1px 1px 0 #692075,
    0 0 6px rgba(255,255,255,0.20);
}


/* =========================================================
   EXTENDED NETWORK
   ========================================================= */

.extended-network {
  text-align: center;
}

.network-welcome {
  display: inline-block;

  padding: 5px 9px;

  background: #061013;

  color: #7dffcb;

  border: 2px inset #5a465f;

  font-family: "Courier New", monospace;

  font-weight: bold;

  letter-spacing: 0.5px;

  text-shadow:
    0 0 5px rgba(112,255,201,0.70);
}


/* =========================================================
   PROFILE
   ========================================================= */

.profile-image {
  position: relative;

  height: 285px;
  overflow: hidden;

  padding: 3px;

  margin: 10px 0 13px;

  background:
    linear-gradient(
      180deg,
      #f1c8ff,
      #9a55ba 22%,
      #55206e 72%,
      #250c31
    );

  border-top: 2px solid #fff0ff;
  border-left: 2px solid #d798ec;
  border-right: 2px solid #451755;
  border-bottom: 3px solid #260c31;
}

.profile-image::after {
  content: "REC ●";

  position: absolute;

  top: 8px;
  right: 8px;

  padding: 2px 4px;

  color: #ff8acb;

  background: rgba(20,5,26,0.55);

  font-family: "Courier New", monospace;

  font-size: 0.47rem;
  font-weight: bold;

  border: 1px solid rgba(255,181,236,0.32);
}

.profile-image img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
  object-position: center 35%;
}


/* =========================================================
   ONLINE
   ========================================================= */

.online {
  color: #7bffc7;

  font-family: "Courier New", monospace;

  font-size: 0.72rem;
  font-weight: bold;

  text-shadow:
    0 0 5px rgba(104,255,193,0.95),
    0 0 12px rgba(104,255,193,0.45);
}

.online::before {
  content: "";

  display: inline-block;

  width: 7px;
  height: 7px;

  margin-right: 6px;

  border-radius: 50%;

  background: #76ffc5;

  box-shadow:
    0 0 4px #76ffc5,
    0 0 10px rgba(118,255,197,0.9);
}


/* =========================================================
   CONTACT
   ========================================================= */

.contact-box a {
  display: block;

  margin: 5px 0;
  padding: 6px 7px;

  color: #fff3ff;

  background:
    linear-gradient(
      180deg,
      rgba(221,121,237,0.35),
      rgba(74,19,101,0.70)
    );

  border-top: 1px solid rgba(242,193,255,0.80);
  border-left: 1px solid rgba(191,124,223,0.65);
  border-right: 1px solid rgba(46,8,65,0.90);
  border-bottom: 1px solid rgba(34,6,49,0.95);

  font-size: 0.68rem;
  font-weight: bold;

  text-decoration: none;
}

.contact-box a::before {
  content: "★";

  margin-right: 6px;

  color: #ff80da;
}


/* =========================================================
   XP PLAYER
   ========================================================= */

.xp-player {
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0px,
      transparent 8px,
      rgba(255,255,255,0.035) 9px,
      transparent 10px
    ),

    linear-gradient(
      145deg,
      rgba(196,91,221,0.65),
      rgba(96,32,131,0.75) 46%,
      rgba(34,10,50,0.95)
    );
}

.player-screen {
  padding: 8px;

  margin-bottom: 9px;

  background:
    linear-gradient(
      180deg,
      #09181a,
      #061113 55%,
      #020809
    );

  border-top: 3px solid #597477;
  border-left: 3px solid #435e61;
  border-right: 3px solid #050a0c;
  border-bottom: 3px solid #020506;

  box-shadow:
    inset 0 0 12px rgba(87,255,201,0.12),
    0 0 6px rgba(0,0,0,0.45);

  font-family: "Courier New", monospace;
}

.player-topline {
  margin-bottom: 5px;

  color: #68ffc0;

  font-size: 0.56rem;
  font-weight: bold;

  letter-spacing: 1.1px;

  text-shadow:
    0 0 5px rgba(104,255,192,0.8);
}

.player-song {
  color: #b2ffd8;

  font-size: 1.05rem;
  font-weight: bold;

  letter-spacing: 1px;

  text-shadow:
    0 0 7px rgba(100,255,194,0.75);
}

.player-artist {
  margin-top: 2px;

  color: #63dcae;

  font-size: 0.62rem;

  letter-spacing: 1px;
}

.player-progress {
  display: flex;
  align-items: center;

  gap: 4px;

  margin-top: 8px;
}

.player-time {
  color: #76cdaa;

  font-size: 0.47rem;
}

.progress-track {
  flex: 1;

  height: 4px;

  background: #14292a;

  border: 1px solid #315252;
}

.progress-fill {
  width: 36%;
  height: 100%;

  background:
    linear-gradient(
      90deg,
      #65ffbd,
      #79d7ff
    );

  box-shadow:
    0 0 5px rgba(94,255,194,0.6);
}

.equalizer {
  margin-top: 6px;

  color: #69ffc0;

  font-size: 0.60rem;

  letter-spacing: 1px;

  text-align: center;

  text-shadow:
    0 0 5px rgba(102,255,192,0.8);
}

.player-controls {
  margin: 8px 0 10px;

  padding: 6px;

  text-align: center;

  color: #ffffff;

  font-size: 0.72rem;

  letter-spacing: 5px;

  background:
    linear-gradient(
      180deg,
      rgba(240,176,250,0.43),
      rgba(122,49,151,0.54),
      rgba(54,15,75,0.76)
    );

  border-top: 2px solid #efc7fa;
  border-left: 2px solid #ba83ce;
  border-right: 2px solid #451550;
  border-bottom: 2px solid #2c0b37;
}

.rotation {
  padding: 6px;

  background:
    rgba(27,5,40,0.28);

  border:
    1px solid rgba(236,181,247,0.18);
}

.rotation-title {
  margin: 0 0 6px;

  color: #ff88d9;

  font-family: "Courier New", monospace;

  font-size: 0.55rem;
  font-weight: bold;

  letter-spacing: 1px;
}

.rotation-track {
  display: flex;

  gap: 7px;

  padding: 5px 2px;

  border-bottom:
    1px dotted rgba(236,203,243,0.18);
}

.rotation-track:last-child {
  border-bottom: 0;
}

.track-number {
  color: #73ffc3;

  font-family: "Courier New", monospace;

  font-size: 0.52rem;
}

.rotation-track div {
  min-width: 0;
}

.rotation-track strong {
  display: block;

  font-size: 0.58rem;
  line-height: 1.25;
}

.rotation-track div span {
  display: block;

  margin-top: 1px;

  color: #bea8c7;

  font-size: 0.51rem;
}


/* =========================================================
   TOP FIVE
   ========================================================= */

.top-five {
  display: grid;

  grid-template-columns:
    repeat(5, 1fr);

  gap: 10px;

  margin-top: 10px;
}

.top-item {
  text-align: center;
}

.top-image {
  position: relative;
  overflow: hidden;

  aspect-ratio: 1 / 1;

  padding: 3px;

  background:
    linear-gradient(
      180deg,
      #eac5f4,
      #9053a5 26%,
      #4b225f 73%,
      #220b2b
    );

  border-top: 2px solid #fae8ff;
  border-left: 2px solid #ca92dd;
  border-right: 2px solid #4a175b;
  border-bottom: 3px solid #2c0c39;

  box-shadow:
    0 0 7px rgba(209,89,255,0.28);
}

.top-image img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
}

.top-image::before {
  content: "";

  position: absolute;
  z-index: 3;

  top: 7px;
  left: 7px;

  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: #7affc6;

  box-shadow:
    0 0 4px #7affc6,
    0 0 7px rgba(122,255,198,0.7);
}

.top-item p {
  margin: 5px 0 0;

  padding: 3px 2px;

  color: #ffffff;

  font-family: "Courier New", monospace;

  font-size: 0.61rem;
  font-weight: bold;

  background:
    linear-gradient(
      180deg,
      rgba(191,73,203,0.48),
      rgba(66,18,88,0.68)
    );

  border:
    1px solid rgba(225,169,239,0.25);
}


/* =========================================================
   INTERNET JUNK DRAWER
   ========================================================= */

.junk-drawer {
  padding-bottom: 18px;

  background:
    repeating-linear-gradient(
      45deg,
      rgba(255,93,207,0.025) 0px,
      rgba(255,93,207,0.025) 5px,
      transparent 5px,
      transparent 10px
    ),

    radial-gradient(
      circle at 15% 70%,
      rgba(255,94,211,0.13),
      transparent 30%
    ),

    radial-gradient(
      circle at 87% 28%,
      rgba(91,151,255,0.11),
      transparent 28%
    ),

    linear-gradient(
      135deg,
      rgba(193,83,225,0.58),
      rgba(65,21,92,0.90)
    );
}


/* TOP BLINKIES */

.junk-top-row {
  display: flex;
  flex-wrap: wrap;

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

  gap: 7px;

  margin:
    4px
    0
    9px;
}

.junk-blinkie {
  max-width: 100%;

  image-rendering: auto;
}


/* BUTTERFLY DIVIDER */

.junk-divider {
  overflow: hidden;

  margin:
    7px
    auto
    11px;

  text-align: center;
}

.junk-divider img {
  width: auto;
  max-width: 95%;
  height: auto;

  display: inline-block;
}


/* CHAOS AREA */

.junk-chaos {
  display: grid;

  grid-template-columns:
    1.6fr
    0.8fr
    0.8fr;

  gap: 8px;

  align-items: center;

  padding: 8px;

  background:
    rgba(18,3,29,0.30);

  border-top:
    1px dotted rgba(255,206,249,0.28);

  border-bottom:
    1px dotted rgba(255,206,249,0.28);
}


/* LARGE FEATURE GRAPHICS */

.junk-feature {
  display: flex;

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

  min-width: 0;

  padding: 4px;

  background:
    rgba(13,3,20,0.42);

  border:
    1px solid rgba(242,190,255,0.22);
}

.junk-feature img {
  display: block;

  max-width: 100%;
  height: auto;
}

.city-feature {
  grid-column:
    1 / 3;
}

.anime-feature {
  grid-column:
    1 / 4;
}

.anime-feature img {
  width: 100%;
  max-height: 220px;

  object-fit: cover;
}


/* LITTLE BUTTON STACK */

.junk-mini-stack {
  display: flex;
  flex-direction: column;

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

  gap: 8px;

  min-width: 0;
}

.junk-mini-stack img {
  display: block;

  max-width: 100%;
  height: auto;
}


/* IPOD */

.junk-ipod {
  display: flex;

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

  min-height: 125px;

  padding: 5px;

  background:
    radial-gradient(
      circle,
      rgba(129,217,255,0.10),
      transparent 67%
    );
}

.junk-ipod img {
  max-width: 110px;
  width: 100%;
  height: auto;

  display: block;

  filter:
    drop-shadow(
      0 0 5px rgba(116,203,255,0.28)
    );
}


/* RANDOM TINY STUFF */

.junk-random {
  position: relative;

  grid-column:
    1 / 4;

  min-height: 50px;

  display: flex;

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

  gap: 20px;

  padding: 5px;
}

.junk-love {
  max-width: 90px;
  height: auto;
}

.junk-ghost {
  width: auto;
  height: auto;

  transform:
    translateY(5px);
}


/* JUNK FOOTER */

.junk-footer {
  display: flex;

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

  gap: 8px;

  margin-top: 9px;

  padding:
    5px
    7px;

  color: #d8aadf;

  background:
    rgba(23,5,34,0.40);

  border:
    1px solid rgba(230,164,242,0.15);

  font-family:
    "Courier New",
    monospace;

  font-size: 0.47rem;
  font-weight: bold;

  letter-spacing: 0.5px;
}


/* =========================================================
   TEXT
   ========================================================= */

p {
  position: relative;
  z-index: 2;

  color: #eee2f2;

  font-size: 0.80rem;
  line-height: 1.55;
}

strong {
  color: #ffffff;
}

.small-text {
  color: #c1aec9;

  font-size: 0.66rem;
}

h3 {
  color: #ff75d6;

  font-size: 0.86rem;

  text-shadow:
    0 0 5px rgba(255,102,211,0.52);
}


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

.button {
  display: inline-block;

  margin-top: 6px;

  padding: 6px 12px;

  background:
    linear-gradient(
      180deg,
      #ee8be4,
      #c142c8 32%,
      #7b248f 72%,
      #4a125c
    );

  border-top: 2px solid #ffd9ff;
  border-left: 2px solid #d58ee4;
  border-right: 2px solid #531463;
  border-bottom: 3px solid #310b3d;

  color: #ffffff;

  font-size: 0.66rem;
  font-weight: bold;

  text-decoration: none;
}


/* =========================================================
   VISITOR COUNTER
   ========================================================= */

.visitor-panel {
  text-align: center;
}

.visitor-number {
  display: inline-block;

  padding: 6px 10px;

  background: #070c0e;

  color: #81ffca;

  border:
    2px inset #44374d;

  font-family:
    "Courier New",
    monospace;

  font-weight: bold;

  letter-spacing: 1px;

  text-shadow:
    0 0 6px rgba(115,255,198,0.70);
}


/* =========================================================
   FOOTER
   ========================================================= */

footer {
  text-align: center;

  padding:
    12px
    10px
    26px;

  color: #aa91b4;

  font-family:
    "Courier New",
    monospace;

  font-size: 0.59rem;

  letter-spacing: 2px;
}

footer::before {
  content: "★ ☆ ♥ ☆ ★ ☆ ♥ ☆ ★";

  display: block;

  margin-bottom: 7px;

  color: #ff7bd8;

  letter-spacing: 8px;
}


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

@media (max-width: 700px) {

  .site-wrap {
    width: 96%;
  }

  .xp-header h1 {
    font-size: 2.55rem;
    letter-spacing: 4px;
  }

  .xp-header h1::after {
    display: none;
  }

  nav a {
    padding:
      5px
      7px;
  }

  .main-layout {
    display: block;
  }

  .profile-column,
  .content-column {
    width: 100%;
  }

  .top-five {
    grid-template-columns:
      repeat(2, 1fr);
  }

  .top-five .top-item:last-child {
    grid-column:
      1 / -1;

    width: 50%;

    justify-self: center;
  }

  .junk-chaos {
    grid-template-columns:
      repeat(2, 1fr);
  }

  .city-feature,
  .anime-feature,
  .junk-random {
    grid-column:
      1 / -1;
  }

  .junk-footer {
    display: block;

    text-align: center;
  }

  .junk-footer span {
    display: block;

    margin: 3px 0;
  }
}

  /* =========================================================
   XP JUNK DRAWER - COMPACT COLLAGE OVERRIDE
   ========================================================= */

.junk-drawer {
  padding-bottom: 15px;
}


/* TOP BLINKIES */

.junk-top-row {
  display: flex;
  flex-wrap: wrap;

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

  gap: 6px;

  margin: 3px 0 7px;
}


/* BUTTERFLY DIVIDER */

.junk-divider {
  margin: 4px auto 8px;

  text-align: center;
}

.junk-divider img {
  display: inline-block;

  width: auto;
  max-width: 90%;
  height: auto;
}


/* MAIN JUNK COLLAGE */

.junk-chaos {
  display: grid;

  grid-template-columns:
    minmax(0, 1.7fr)
    minmax(100px, 0.55fr);

  gap: 9px;

  align-items: start;

  padding: 9px;

  background:
    rgba(18,3,29,0.26);

  border-top:
    1px dotted rgba(255,206,249,0.28);

  border-bottom:
    1px dotted rgba(255,206,249,0.28);
}


/* CITY GIF */

.city-feature {
  grid-column: 1;
  grid-row: 1;

  margin: 0;
  padding: 5px;
}

.city-feature img {
  width: 100%;
  height: auto;

  display: block;
}


/* BUTTONS BESIDE CITY */

.junk-mini-stack {
  grid-column: 2;
  grid-row: 1;

  display: flex;
  flex-direction: column;

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

  gap: 10px;

  height: 100%;

  padding: 4px;
}

.junk-mini-stack img {
  display: block;

  width: auto;
  max-width: 100%;
  height: auto;
}


/* IPOD */

.junk-ipod {
  grid-column: 2;
  grid-row: 2;

  display: flex;

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

  min-height: 0;

  padding: 4px;

  background: none;
}

.junk-ipod img {
  display: block;

  width: 105px;
  max-width: 100%;
  height: auto;

  filter:
    drop-shadow(
      0 0 5px rgba(116,203,255,0.28)
    );
}


/* ANIME GIF */

.anime-feature {
  grid-column: 1;
  grid-row: 2;

  margin: 0;
  padding: 4px;
}

.anime-feature img {
  display: block;

  width: 100%;
  height: auto;
  max-height: 210px;

  object-fit: cover;
}


/* HEART + GHOST */

.junk-random {
  grid-column: 1 / -1;
  grid-row: 3;

  min-height: 0;

  display: flex;

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

  gap: 18px;

  padding: 4px 0 2px;
}

.junk-love {
  width: 82px;
  height: auto;
}

.junk-ghost {
  width: auto;
  height: auto;

  transform: none;
}


/* BOTTOM LABEL */

.junk-footer {
  margin-top: 7px;
}


/* MOBILE */

@media (max-width: 700px) {

  .junk-chaos {
    grid-template-columns:
      1fr
      120px;
  }

  .city-feature {
    grid-column: 1;
    grid-row: 1;
  }

  .junk-mini-stack {
    grid-column: 2;
    grid-row: 1;
  }

  .anime-feature {
    grid-column: 1;
    grid-row: 2;
  }

  .junk-ipod {
    grid-column: 2;
    grid-row: 2;
  }

  .junk-random {
    grid-column: 1 / -1;
    grid-row: 3;
  }

}

/* =========================================================
   FINAL JUNK DRAWER POLISH
   ========================================================= */

.junk-chaos {
  grid-template-columns: minmax(0, 1fr) 150px;
  grid-template-rows: auto auto;
  gap: 8px 10px;
  align-items: start;
  padding: 8px;
}

.city-feature {
  grid-column: 1;
  grid-row: 1;
}

.junk-mini-stack {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  gap: 8px;
  padding: 2px;
}

.anime-feature {
  grid-column: 1;
  grid-row: 2;
}

.junk-ipod {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  min-height: 0;
  padding: 2px 2px 0;
}

.junk-ipod img {
  width: 96px;
}

.junk-random {
  grid-column: 2;
  grid-row: 2;
  align-self: end;
  justify-self: stretch;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 9px;
  min-height: 0;
  margin-top: 110px;
  padding: 0 0 3px;
  pointer-events: none;
}

.junk-love {
  width: 58px;
}

.junk-ghost {
  transform: translateY(-3px);
}

.junk-footer {
  margin-top: 6px;
}

/* =========================================================
   XP COMMENTS WALL
   ========================================================= */

.comments-wall {
  padding-bottom: 11px;
}

.comment-list {
  display: grid;
  gap: 7px;
}

.comment-card {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 8px;
  padding: 7px;
  background: rgba(25, 5, 38, 0.42);
  border-top: 1px solid rgba(255, 207, 249, 0.27);
  border-left: 1px solid rgba(221, 148, 240, 0.20);
  border-right: 1px solid rgba(51, 11, 72, 0.82);
  border-bottom: 1px solid rgba(38, 7, 55, 0.90);
}

.comment-avatar {
  width: 62px;
  height: 62px;
  padding: 2px;
  overflow: hidden;
  background: linear-gradient(180deg, #f4caff, #9a4db0 34%, #3a124d 100%);
  border-top: 2px solid #ffe7ff;
  border-left: 2px solid #d99be8;
  border-right: 2px solid #481456;
  border-bottom: 2px solid #270a31;
}

.comment-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  background: #13051d;
}

.comment-body {
  min-width: 0;
}

.comment-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 8px;
  margin-bottom: 4px;
  padding-bottom: 3px;
  border-bottom: 1px dotted rgba(255, 208, 247, 0.18);
}

.comment-user {
  color: #ff91dd;
  font-size: 0.68rem;
  font-weight: bold;
  text-transform: lowercase;
  text-shadow: 0 0 4px rgba(255, 105, 217, 0.42);
}

.comment-date {
  color: #9d89a8;
  font-family: "Courier New", monospace;
  font-size: 0.48rem;
  letter-spacing: 0.4px;
}

.comment-body p {
  margin: 3px 0 0;
  font-size: 0.70rem;
  line-height: 1.45;
}

.comment-action {
  display: inline-block;
  margin-top: 5px;
  color: #7fffc7;
  font-family: "Courier New", monospace;
  font-size: 0.48rem;
  text-decoration: none;
}

.comment-action:hover {
  color: #fff38f;
}

.comments-footer {
  margin: 8px 0 0;
  text-align: right;
  color: #a98eb3;
  font-family: "Courier New", monospace;
  font-size: 0.48rem;
  letter-spacing: 0.5px;
}

@media (max-width: 700px) {
  .junk-chaos {
    grid-template-columns: minmax(0, 1fr) 110px;
  }

  .junk-ipod img {
    width: 80px;
  }

  .junk-random {
    margin-top: 90px;
    gap: 6px;
  }

  .junk-love {
    width: 48px;
  }

  .comment-card {
    grid-template-columns: 52px minmax(0, 1fr);
  }

  .comment-avatar {
    width: 52px;
    height: 52px;
  }
}

/* =========================================================
   ABOUT PAGE
   ========================================================= */

.about-page {
  margin-top: 16px;
}

.about-intro {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.about-id-photo {
  position: relative;
  overflow: hidden;
  padding: 4px;
  background: linear-gradient(180deg, #f2ceff, #9b50b2 30%, #421653 100%);
  border-top: 2px solid #fff1ff;
  border-left: 2px solid #dda3ec;
  border-right: 2px solid #4c175c;
  border-bottom: 3px solid #270b31;
}

.about-id-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center 35%;
}

.about-id-photo::after {
  content: "USER: XP";
  position: absolute;
  left: 9px;
  bottom: 9px;
  padding: 3px 5px;
  background: rgba(5, 10, 12, 0.78);
  border: 1px solid rgba(115, 255, 199, 0.42);
  color: #7fffc7;
  font-family: "Courier New", monospace;
  font-size: 0.52rem;
  font-weight: bold;
  letter-spacing: 1px;
  text-shadow: 0 0 5px rgba(115,255,199,0.65);
}

.about-id-copy h3 {
  margin-top: 2px;
  font-size: 1rem;
}

.about-id-copy p {
  margin: 8px 0;
}

.system-sheet {
  display: grid;
  grid-template-columns: 145px minmax(0, 1fr);
  margin-top: 12px;
  border: 1px solid rgba(235, 185, 247, 0.18);
  background: rgba(20, 4, 31, 0.30);
}

.system-label,
.system-value {
  padding: 7px 8px;
  border-bottom: 1px dotted rgba(244, 207, 250, 0.16);
  font-size: 0.68rem;
}

.system-label {
  color: #76ffc4;
  font-family: "Courier New", monospace;
  font-weight: bold;
  text-transform: uppercase;
  background: rgba(8, 22, 23, 0.24);
}

.system-value {
  color: #f0e5f3;
}

.system-sheet > div:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.about-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.about-module {
  margin-bottom: 0;
}

.about-module ul {
  margin: 8px 0 0;
  padding-left: 18px;
}

.about-module li {
  margin: 5px 0;
  color: #eee2f2;
  font-size: 0.76rem;
  line-height: 1.45;
}

.about-module li::marker {
  color: #ff78d3;
}

.profile-answer {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px dotted rgba(255, 210, 249, 0.16);
}

.profile-answer:last-child {
  border-bottom: 0;
}

.profile-question {
  color: #ff8ddd;
  font-size: 0.68rem;
  font-weight: bold;
  text-transform: lowercase;
}

.profile-response {
  color: #eee2f2;
  font-size: 0.72rem;
  line-height: 1.45;
}

.about-marquee {
  overflow: hidden;
  white-space: nowrap;
  margin-top: 10px;
  padding: 6px 8px;
  background: #071113;
  border: 2px inset #44374d;
  color: #7fffc7;
  font-family: "Courier New", monospace;
  font-size: 0.58rem;
  letter-spacing: 1px;
  text-align: center;
  text-shadow: 0 0 5px rgba(115,255,199,0.65);
}

.about-signoff {
  text-align: center;
}

.about-signoff .button {
  margin: 4px 3px;
}

@media (max-width: 700px) {
  .about-intro {
    grid-template-columns: 1fr;
  }

  .about-id-photo {
    max-width: 260px;
    margin: 0 auto;
  }

  .about-grid {
    grid-template-columns: 1fr;
  }

  .system-sheet {
    grid-template-columns: 115px minmax(0, 1fr);
  }

  .profile-answer {
    grid-template-columns: 100px minmax(0, 1fr);
  }
}

/* =========================================================
   XP.LOG PAGE
   ========================================================= */

.log-page {
  margin-top: 16px;
}

.log-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 230px;
  gap: 14px;
  align-items: start;
}

.log-entry {
  margin-bottom: 14px;
}

.log-entry-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
  padding-bottom: 7px;
  border-bottom: 1px dotted rgba(255, 210, 249, 0.18);
}

.log-entry-title {
  margin: 0;
  color: #ff8ddd;
  font-size: 1rem;
  text-transform: lowercase;
  text-shadow: 0 0 5px rgba(255,102,211,0.45);
}

.log-entry-date {
  color: #bfa9c8;
  font-family: "Courier New", monospace;
  font-size: 0.54rem;
  letter-spacing: 0.8px;
  white-space: nowrap;
}

.log-meta {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 0;
  margin: 8px 0 12px;
  border: 1px solid rgba(234, 185, 247, 0.16);
  background: rgba(20, 4, 31, 0.26);
}

.log-meta-label,
.log-meta-value {
  padding: 6px 7px;
  border-bottom: 1px dotted rgba(244, 207, 250, 0.14);
  font-size: 0.64rem;
}

.log-meta-label {
  color: #72ffc2;
  font-family: "Courier New", monospace;
  font-weight: bold;
  text-transform: uppercase;
  background: rgba(8, 22, 23, 0.20);
}

.log-meta-value {
  color: #eee2f2;
}

.log-meta > div:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.log-body {
  padding: 2px 2px 4px;
}

.log-body p {
  margin: 10px 0;
  font-size: 0.80rem;
  line-height: 1.65;
}

.log-signature {
  margin-top: 14px;
  color: #ff84d9;
  font-family: "Courier New", monospace;
  font-size: 0.64rem;
  font-weight: bold;
}

.log-entry-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding-top: 8px;
  border-top: 1px dotted rgba(255, 210, 249, 0.17);
  color: #bca5c5;
  font-family: "Courier New", monospace;
  font-size: 0.52rem;
}

.log-entry-footer a {
  color: #7fffc7;
  text-decoration: none;
}

.log-entry-footer a:hover {
  color: #ff8ddd;
}

.log-sidebar .panel {
  margin-bottom: 14px;
}

.archive-list,
.category-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.archive-list li,
.category-list li {
  margin: 0;
  border-bottom: 1px dotted rgba(255, 210, 249, 0.16);
}

.archive-list li:last-child,
.category-list li:last-child {
  border-bottom: 0;
}

.archive-list a,
.category-list a {
  display: block;
  padding: 7px 4px;
  color: #eee2f2;
  font-size: 0.68rem;
  text-decoration: none;
}

.archive-list a::before,
.category-list a::before {
  content: ">";
  margin-right: 6px;
  color: #73ffc3;
  font-family: "Courier New", monospace;
}

.archive-list a:hover,
.category-list a:hover {
  color: #ff8ddd;
}

.log-status-screen {
  margin-top: 4px;
  padding: 8px;
  background: linear-gradient(180deg, #081517, #030a0b);
  border-top: 2px solid #587174;
  border-left: 2px solid #40595c;
  border-right: 2px solid #05090a;
  border-bottom: 2px solid #020506;
  color: #79ffc5;
  font-family: "Courier New", monospace;
  font-size: 0.58rem;
  line-height: 1.55;
  text-shadow: 0 0 5px rgba(109,255,194,0.60);
}

.log-status-screen strong {
  color: #b5ffdc;
}

.log-note {
  padding: 7px 8px;
  background: rgba(32, 7, 47, 0.32);
  border-left: 2px solid rgba(255, 124, 218, 0.45);
  color: #d8c8dd;
  font-size: 0.65rem;
  line-height: 1.5;
}

.log-pagination {
  text-align: center;
}

.log-pagination .button {
  margin: 3px;
}

@media (max-width: 700px) {
  .log-layout {
    grid-template-columns: 1fr;
  }

  .log-entry-header {
    display: block;
  }

  .log-entry-date {
    display: block;
    margin-top: 4px;
  }

  .log-sidebar {
    order: -1;
  }
}