/* =========================================================
   CYBERDOLL — about ("CYBERDOLL's space", a 2006 profile page)
   (loads after style.css + shop.css)
   ========================================================= */

.page-about .nav { background: rgba(10, 10, 11, .95); }

.ab {
  position: relative;
  min-height: 100vh;
  padding: calc(var(--header-h) + 34px) 0 clamp(60px, 8vw, 110px);
  background: #120a14;
  color: var(--ink);
  overflow: hidden;
}
/* tiled pixel hearts drifting diagonally (a moving layer, not a repaint) */
.ab-bg {
  position: absolute;
  inset: -120px 0 0 -120px;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' shape-rendering='crispEdges'><g fill='%23ff5ea8' fill-opacity='.22'><path transform='translate(20 22) scale(3)' d='M1 0h2v1h1V0h2v1h1v2H6v1H5v1H4v1H3V5H2V4H1V3H0V1h1z'/></g><g fill='%239fc4e8' fill-opacity='.18'><path transform='translate(78 80) scale(2)' d='M2 0h1v2h2v1H3v2H2V3H0V2h2z'/></g></svg>") 0 0 / 120px 120px;
  animation: drift 14s linear infinite;
  will-change: transform;
  pointer-events: none;
}
@keyframes drift { to { transform: translate(120px, 120px); } }

.ab-wrap {
  position: relative; z-index: 1;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---------- fake browser + title ---------- */
.ab-browser {
  display: flex; align-items: center; gap: 12px;
  padding: 7px 10px;
  background: #d9d6d1;
  border: 2px solid var(--ink);
  box-shadow: inset -2px -2px 0 #a9a6a2, inset 2px 2px 0 var(--white);
  margin-bottom: 26px;
  font-family: var(--f-mono);
  font-size: 12px;
}
.ab-browser__dots { display: flex; gap: 5px; }
.ab-browser__dots i { width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid var(--ink); background: var(--hotpink); }
.ab-browser__dots i:nth-child(2) { background: #ffd24a; }
.ab-browser__dots i:nth-child(3) { background: #7dff6a; }
.ab-browser__url {
  flex: 1; min-width: 0;
  background: var(--white);
  border: 1.5px solid var(--ink);
  box-shadow: inset 2px 2px 0 rgba(0,0,0,.15);
  padding: 4px 10px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ab-browser__url b { color: var(--red); }
.ab-browser__go { font-family: var(--f-pixel); font-size: 10px; padding: 4px 10px; border: 1.5px solid var(--ink); background: #eceae6; }

.ab-title { text-align: center; font-weight: 400; margin-bottom: 18px; color: var(--white); }
.ab-title__small {
  display: block;
  font-family: var(--f-script);
  font-size: clamp(36px, 4vw, 60px);
  line-height: 1;
  color: var(--pink);
  opacity: 0;
  transform: translateY(20px);
  animation: abIn .8s var(--ease) .1s forwards;
}
.ab-title__big {
  position: relative;
  display: inline-block;
  font-family: var(--f-pixel);
  font-size: clamp(38px, 7.4vw, 104px);
  line-height: 1;
  text-shadow: 4px 4px 0 var(--hotpink), 8px 8px 0 var(--ink), 0 0 30px rgba(255, 94, 168, .5);
  opacity: 0;
  transform: scale(.85);
  animation: abIn .9s cubic-bezier(.3, 1.5, .5, 1) .25s forwards;
}
@keyframes abIn { to { opacity: 1; transform: none; } }
.ab-title__big::before, .ab-title__big::after {
  content: attr(data-glitch);
  position: absolute; left: 0; top: 0;
  opacity: 0;
  text-shadow: none;
}
.ab-title__big::before { color: var(--red); }
.ab-title__big::after { color: var(--ice); }
.ab-title.is-glitching .ab-title__big::before { opacity: .85; animation: rgbA .3s steps(2) 2; }
.ab-title.is-glitching .ab-title__big::after { opacity: .85; animation: rgbB .3s steps(2) 2; }

.ab-ticker {
  background: var(--pink);
  border: 2px solid var(--ink);
  padding: 5px 0;
  margin-bottom: 26px;
  font-family: var(--f-pixel);
  font-size: 12px;
}
.ab-ticker span { padding-right: 34px; }

/* ---------- layout ---------- */
.ab-cols {
  display: grid;
  grid-template-columns: minmax(0, 370px) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

/* ---------- boxes ---------- */
.ab-box {
  background: #eceae6;
  border: 2px solid var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
  margin-bottom: 22px;
}
.ab-box__bar {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 6px 10px;
  background: linear-gradient(90deg, var(--hotpink), var(--pink) 55%, var(--ice));
  border-bottom: 2px solid var(--ink);
  font-family: var(--f-pixel);
  font-weight: 400;
  font-size: 12px;
}
.ab-box__bar a, .ab-box__bar span { font-size: 10px; }
.ab-box__bar a { border-bottom: 1px solid currentColor; }
.ab-box__bar a:hover { color: var(--white); }
.ab-box__body { padding: 14px; }

/* profile card */
.ab-profile { padding: 14px; }
.ab-profile__name { font-family: var(--f-display); font-weight: 400; font-size: 38px; line-height: 1; margin-bottom: 12px; }
.ab-profile__row { display: grid; grid-template-columns: 150px 1fr; gap: 14px; margin-bottom: 12px; }
.ab-profile__pic { aspect-ratio: 1; border: 2px solid var(--ink); }
.ab-profile__meta { font-size: 12px; line-height: 1.45; display: flex; flex-direction: column; gap: 6px; }
.ab-profile__meta li:first-child { font-style: italic; color: var(--red); }
.ab-online { display: flex; align-items: center; gap: 6px; font-family: var(--f-pixel); font-size: 11px; color: #1f9d12; }
.ab-online i { width: 10px; height: 10px; background: #7dff6a; border: 1.5px solid #1f9d12; animation: blinkOn 1s steps(2) infinite; }
@keyframes blinkOn { 50% { opacity: .2; } }
.ab-profile__mood, .ab-profile__views { font-family: var(--f-pixel); font-size: 11px; margin-top: 4px; }
.ab-profile__mood b, .ab-profile__views b { font-weight: 400; color: var(--red); }
.ab-smiley { display: inline-block; animation: bob 1.6s ease-in-out infinite alternate; }
@keyframes bob { to { transform: translateY(-3px) rotate(4deg); } }

/* contact buttons */
.ab-contact { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 12px; }
.ab-btn {
  display: block;
  font-family: var(--f-pixel);
  font-size: 10px;
  text-align: left;
  padding: 8px 10px;
  background: #eceae6;
  border: 2px solid var(--ink);
  box-shadow: inset -2px -2px 0 #a9a6a2, inset 2px 2px 0 var(--white);
  transition: background .2s, color .2s;
}
.ab-btn:hover { background: var(--pink); }
.ab-btn:active { box-shadow: inset 2px 2px 0 #a9a6a2; transform: translate(1px, 1px); }
.ab-btn.is-shaking { animation: shake .4s; background: var(--red); color: var(--white); }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

/* tables */
.ab-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.ab-table th, .ab-table td { padding: 7px 12px; border-bottom: 1px dashed rgba(10,10,11,.25); vertical-align: top; text-align: left; }
.ab-table th { width: 96px; font-family: var(--f-pixel); font-weight: 400; font-size: 10px; color: var(--hotpink); }
.ab-table tr:last-child th, .ab-table tr:last-child td { border-bottom: 0; }
.ab-table--interests th { background: rgba(255, 169, 207, .25); }

.ab-box .player { margin-bottom: 0; }

/* extended network */
.ab-network {
  padding: 22px 16px;
  text-align: center;
  font-family: var(--f-display);
  font-size: clamp(22px, 2.6vw, 34px);
  line-height: 1.1;
  background: var(--white);
}
.ab-network__stars { display: block; margin-top: 6px; font-size: 16px; color: var(--hotpink); letter-spacing: .3em; animation: twinkle 1.4s steps(2) infinite; }
@keyframes twinkle { 50% { color: var(--ice); } }

/* blurbs */
.ab-blurbs h3 { font-family: var(--f-pixel); font-weight: 400; font-size: 12px; color: var(--red); margin: 6px 0 8px; }
.ab-blurbs p { font-size: 14px; line-height: 1.7; margin-bottom: 12px; }
.ab-blurbs mark { background: var(--ink); color: var(--pink); padding: 0 .25em; }
.ab-typed::after { content: "▌"; color: var(--hotpink); animation: blink 1s steps(2) infinite; }
.ab-typed.is-done::after { display: none; }
@keyframes blink { 50% { opacity: 0; } }
.ab-blurbs__pics { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0 18px; }
.ab-blurbs__pics .media { aspect-ratio: 4 / 3; border: 2px solid var(--ink); }
.ab-blurbs__pics .media:nth-child(1) { rotate: -1.5deg; }
.ab-blurbs__pics .media:nth-child(2) { rotate: 1.5deg; }

/* blog */
.ab-blog { padding: 0 14px; }
.ab-post { padding: 16px 0; border-bottom: 2px dashed rgba(10,10,11,.2); }
.ab-post:last-child { border-bottom: 0; }
.ab-post__date { font-family: var(--f-pixel); font-size: 10px; color: var(--hotpink); margin-bottom: 4px; }
.ab-post h3 { font-family: var(--f-display); font-weight: 400; font-size: 26px; line-height: 1; margin-bottom: 10px; }
.ab-post__row { display: grid; grid-template-columns: 110px 1fr; gap: 14px; align-items: start; }
.ab-post__pic { aspect-ratio: 1; border: 2px solid var(--ink); }
.ab-post p { font-size: 13px; line-height: 1.65; }
.ab-post a, .ab-link { color: var(--red); border-bottom: 1px solid currentColor; font: inherit; }
.ab-post a:hover, .ab-link:hover { color: var(--hotpink); }
.ab-post--locked h3 { color: transparent; -webkit-text-stroke: 1px var(--ink); white-space: nowrap; overflow: hidden; height: 1em; }
.ab-post--locked .ab-post__date span { display: inline-block; min-width: 10ch; }
/* unlocking: a burst of TV static, then the secret slides open */
.ab-post.is-unlocking { animation: staticFlash .7s steps(6); }
@keyframes staticFlash {
  0%, 100% { background: transparent; }
  20% { background: repeating-linear-gradient(0deg, rgba(10,10,11,.18) 0 2px, rgba(255,94,168,.25) 2px 4px); }
  40% { background: transparent; transform: translateX(-3px); }
  60% { background: repeating-linear-gradient(0deg, rgba(159,196,232,.3) 0 1px, transparent 1px 3px); transform: translateX(3px); }
}
.ab-post--unlocked h3 { color: var(--red); }
.ab-post--unlocked .ab-post__date span { color: var(--red); }
.ab-post__secret { overflow: hidden; }
.ab-post__secret.is-opening { animation: secretOpen .8s var(--ease) both; }
@keyframes secretOpen {
  from { clip-path: inset(0 0 100% 0); opacity: 0; transform: translateY(-10px); }
  to { clip-path: inset(0); opacity: 1; transform: none; }
}
.ab-post__secret p { margin-bottom: 8px; }
.ab-post__secret b { color: var(--red); font-weight: 700; }
.ab-post__countdown { font-family: var(--f-pixel); font-size: 11px; }
.ab-peek {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border: 2px solid var(--ink) !important;
}
.ab-peek img { width: 100%; height: 100%; object-fit: cover; filter: blur(7px) grayscale(.4) contrast(1.2); transform: scale(1.15); transition: filter .6s; }
.ab-peek:hover img { filter: blur(4px) grayscale(.2) contrast(1.2); }
.ab-peek span {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%) rotate(-8deg);
  font-family: var(--f-pixel); font-size: 9px;
  background: var(--red); color: var(--white);
  padding: 4px 6px;
  white-space: nowrap;
}

/* top 8 */
.ab-top8__count { font-size: 13px; margin-bottom: 12px; }
.ab-top8__count b { color: var(--red); }
.ab-top8 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 12px; }
.ab-top8 figure { margin: 0; text-align: center; }
.ab-top8 .media {
  aspect-ratio: 1;
  border: 2px solid var(--ink);
  transition: transform .4s cubic-bezier(.3, 1.6, .5, 1), box-shadow .3s;
}
.ab-top8 .ph { font-size: 9px; gap: 4px; }
.ab-top8 .ph__file { display: none; }
.ab-top8 li:nth-child(odd) .media { rotate: -2deg; }
.ab-top8 li:nth-child(even) .media { rotate: 2deg; }
.ab-top8 figure:hover .media { transform: scale(1.08) rotate(-3deg); box-shadow: 5px 5px 0 var(--hotpink); }
.ab-top8 figcaption { font-family: var(--f-pixel); font-size: 9px; margin-top: 8px; color: var(--red); line-height: 1.3; }

/* comments */
.ab-comments { padding: 0 14px; }
.ab-comment {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 2px dashed rgba(10,10,11,.2);
}
.ab-comment.is-new { animation: popIn .5s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes popIn { from { transform: scale(.9); opacity: 0; } }
.ab-comment__who { text-align: center; font-family: var(--f-pixel); font-size: 10px; color: var(--hotpink); word-break: break-word; }
.ab-comment__who img, .ab-comment__who .ab-comment__av {
  display: block;
  width: 72px; height: 72px;
  margin: 0 auto 6px;
  object-fit: cover;
  border: 2px solid var(--ink);
}
.ab-comment__av { display: grid !important; place-items: center; background: var(--pink); color: var(--ink); font-family: var(--f-display); font-size: 34px; }
.ab-comment__body { background: var(--white); border: 1.5px solid var(--ink); padding: 10px 12px; position: relative; }
.ab-comment__body::before {
  content: "";
  position: absolute; left: -9px; top: 16px;
  width: 14px; height: 14px;
  background: var(--white);
  border-left: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink);
  transform: rotate(45deg);
}
.ab-comment__date { font-family: var(--f-pixel); font-size: 9px; opacity: .6; margin-bottom: 4px; }
.ab-comment__text { font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; }

.ab-form { display: grid; gap: 8px; padding: 14px; border-top: 2px solid var(--ink); background: rgba(255, 169, 207, .18); }
.ab-form__title { font-family: var(--f-pixel); font-size: 11px; }
.ab-form input, .ab-form textarea {
  font: 13px var(--f-mono);
  padding: 9px 10px;
  border: 2px solid var(--ink);
  border-radius: 0;
  background: var(--white);
  box-shadow: inset 2px 2px 0 rgba(0,0,0,.12);
  outline: none;
  resize: vertical;
  color: var(--ink);
}
.ab-form input:focus, .ab-form textarea:focus { border-color: var(--hotpink); }
.ab-form .winbtn { justify-self: start; }
.ab-form__msg { min-height: 16px; font-family: var(--f-pixel); font-size: 10px; color: var(--red); }

/* heart confetti for "add to friends" */
.ab-burst { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 9400; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .ab-cols { grid-template-columns: minmax(0, 1fr); }
  .ab-cols > * { min-width: 0; }
  .ab-left { display: contents; }
  /* on phones: profile first, then the story, the rest after */
  .ab-profile { order: -2; }
  .ab-right { order: -1; }
}
@media (max-width: 560px) {
  .ab-profile__row { grid-template-columns: 110px 1fr; }
  .ab-top8 { grid-template-columns: repeat(2, 1fr); }
  .ab-post__row { grid-template-columns: 80px 1fr; }
  .ab-comment { grid-template-columns: 64px 1fr; }
  .ab-comment__who img, .ab-comment__who .ab-comment__av { width: 56px; height: 56px; }
  .ab-browser__go { display: none; }
}

/* ---------- you, on the wall + in the friend space ---------- */
.ab-comment__av--me { padding: 0; background: var(--ink); }
.ab-comment__av--me svg { width: 70%; height: 70%; }
.ab-comment--me .ab-comment__body { background: #fff0f6; border-color: var(--hotpink); }
[data-frame]:not([data-frame="square"]).ab-comment__av--me { border: 0; }
.ab-form__me { display: flex; align-items: center; gap: 10px; padding: 6px 10px 6px 6px; border: 1.5px dashed var(--ink); background: var(--white); font-size: 12px; }
.ab-form__me .ab-comment__av { width: 44px; height: 44px; flex-shrink: 0; border: 2px solid var(--ink); }
.ab-form__me b { color: var(--hotpink); }
.ab-form__me small { display: block; font-family: var(--f-pixel); font-size: 9px; opacity: .6; }
.ab-form__me:hover { background: #fff0f6; }
.ab-top8 li:nth-child(9) { display: none; }
.ab-top8__pic { display: grid; place-items: center; aspect-ratio: 1; background: var(--ink); border: 2px solid var(--hotpink); rotate: -2deg; transition: transform .35s var(--ease), box-shadow .3s; }
.ab-top8__pic svg { width: 60%; height: 60%; }
.ab-top8__pic:hover { transform: scale(1.08) rotate(3deg); }
[data-frame]:not([data-frame="square"]).ab-top8__pic { border: 0; }
.ab-top8__me figcaption { color: var(--hotpink); }
.ab-top8__me figcaption small { display: block; color: var(--ink); opacity: .7; margin-top: 2px; }
.ab-top8__me.is-new { animation: popIn .6s cubic-bezier(.3, 1.6, .5, 1); }