/* === MYSPACE-GRAMMAR SOCIAL MODULES v2 ===
   Counters, marquee, mood line, guestbook, luv, the azura cluster
   contact table, badges, webring. Orange family for content modules,
   blue family for platform boxes. No glow. */

/* hit counter: pixel LED, sanctioned live-signal green */
.hit-counter {
  display: inline-block;
  margin: 6px 0 4px;
}

.counter-label { color: #70707c; margin-right: 4px; font-family: var(--font); font-size: var(--t-xs); }

.counter-value {
  font-family: var(--font-pixel);
  font-size: var(--t-lg);
  color: var(--green-live);
  background: #0a0f0a;
  border: 1px solid #1d2e1d;
  padding: 0 6px;
  letter-spacing: 2px;
}

/* marquee: the platform announcement ticker */
.marquee-wrap {
  overflow: hidden;
  background: #0e1530;
  border-top: 1px solid var(--plat-nav);
  border-bottom: 1px solid var(--plat-bar-edge);
  margin-top: 10px;
  max-width: 100%;
}

.marquee-text {
  display: inline-block;
  white-space: nowrap;
  padding: 3px 0;
  font-size: var(--t-base);
  font-family: var(--font);
  font-weight: bold;
  color: #b7c9f2;
  animation: mq 28s linear infinite;
}

@keyframes mq {
  0% { transform: translateX(100vw); }
  100% { transform: translateX(-100%); }
}

/* mood + now playing (LiveJournal/MSN fusion) */
.mood-line {
  font-size: var(--t-xs);
  color: var(--text-muted);
  font-family: var(--font);
}

.mood-line b { color: var(--text-primary); }

.np-line {
  font-size: var(--t-xs);
  color: var(--text-dim);
  font-style: italic;
  font-family: var(--font);
}

.np-line.live {
  color: var(--green-live);
}

/* guestbook: light system controls on the dark skin (era truth) */
.guestbook-input {
  width: 100%;
  min-height: 52px;
  padding: 4px;
  margin-top: 6px;
  resize: vertical;
}

.guestbook-input:focus { outline: none; border-color: var(--plat-nav); }

.guestbook-submit {
  margin-top: 4px;
  padding: 3px 14px;
  background: var(--grad-control);
  color: #e3e3ea;
  border: 2px outset var(--border-hard);
  font-size: var(--t-base);
  font-weight: bold;
  cursor: pointer;
  font-family: var(--font);
}

.guestbook-submit:hover { color: #fff; }

.guestbook-submit:active { border-style: inset; }

/* luv counter (Bebo hearts) */
.luv-btn {
  float: right;
  background: none;
  border: 1px solid #3a2a32;
  color: var(--hot-pink);
  font-size: var(--t-xs);
  font-family: var(--font);
  padding: 1px 6px;
  cursor: pointer;
}

.luv-btn:hover { border-color: var(--hot-pink); background: #2a1820; }

.luv-btn.luved {
  background: var(--hot-pink);
  color: #2a0a18;
  border-color: var(--hot-pink);
  font-weight: bold;
}

/* === AZURA CLUSTER TABLE (the MySpace contact-box grammar) === */
.contact-table {
  border: 1px solid var(--blue-cell-border);
  background: var(--surface-bg);
  margin: 8px;
}

.contact-table-title {
  background: var(--blue-hd);
  color: var(--blue-hd-text);
  padding: 3px 8px;
  font-size: var(--t-base);
  font-weight: bold;
  font-family: var(--font);
  border-bottom: 1px solid var(--plat-bar-edge);
}

.contact-table-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.contact-table-grid a {
  padding: 4px 6px;
  font-size: var(--t-xs);
  color: var(--link);
  text-decoration: none;
  font-weight: bold;
  border-bottom: 1px solid #23232b;
  border-right: 1px solid #23232b;
  background: var(--blue-cell-b);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contact-table-grid a:visited { color: var(--link-visited); }
.contact-table-grid a:before { content: "\266B "; color: #5f7ec2; font-size: var(--t-xs); }
.contact-table-grid a:hover { background: var(--blue-cell-a); color: #fff; text-decoration: underline; }
.contact-table-grid a:nth-child(2n) { border-right: none; }

/* === 88x31 BADGE WALL === */
.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
  margin: 8px 0 6px;
}

.badge-88x31 {
  width: 88px;
  height: 31px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-badge);
  font-size: 8px;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  color: #cfcfd6;
  background: #101016;
  border: 1px solid #3d3d4a;
  padding: 2px;
  image-rendering: pixelated;
  overflow: hidden;
  font-weight: normal;
}

.badge-88x31:hover {
  color: #fff;
  border-style: dotted;
}

.badge-88x31 img { max-width: 86px; max-height: 29px; image-rendering: pixelated; }

.badge-88x31.b-orange { color: var(--ng-orange); border-color: #4a2c08; background: #190f04; }
.badge-88x31.b-pink { color: var(--hot-pink); border-color: #4a2434; background: #190a12; }
.badge-88x31.b-cyan { color: var(--cyan); border-color: #1c4750; background: #07161a; }
.badge-88x31.b-yellow { color: var(--yellow); border-color: #4a3d08; background: #191404; }

/* === WEBRING === */
.webring {
  display: inline-block;
  margin-top: 4px;
  font-size: var(--t-xs);
  color: var(--text-dim);
  font-family: var(--font);
}

.webring span { margin-right: 4px; }
.webring a { color: var(--link); text-decoration: underline; font-weight: normal; }
.webring a:hover { color: var(--link-hover); }

/* === SEPARATOR === */
.separator-fancy {
  text-align: center;
  color: #4a4a58;
  font-size: var(--t-xs);
  margin: 10px 0;
  letter-spacing: 3px;
  font-family: var(--font);
}

/* === DOODLE HEAD SWAP (the ownable gimmick) === */
.doodle-swap { position: relative; }

.doodle-swap::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 50%;
  transform: translateX(-50%) rotate(-6deg);
  width: 34px;
  height: 34px;
  background: url("../assets/bagel/doodle.png") center/contain no-repeat;
  opacity: 0;
  transition: opacity 0.12s steps(2);
  pointer-events: none;
}

.doodle-swap:hover::after { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .marquee-text { animation: none; padding-left: 8px; }
  .blink { animation: none; }
}