/* ============================================================
   CaLiXa123 (Cali) — soft pastel kawaii / Y2K indie-web prototype
   Palette from refs: pale lavender page, pink OS chrome,
   dark magenta/purple text & borders
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap');

:root {
  /* soft pastel palette */
  --bg-page: #f3eefc;
  --bg-page-2: #fce8f4;
  --bg-window: #fffafd;
  --bg-window-alt: #fff5fb;
  --bg-title: #e9c8e4;
  --bg-title-2: #d9c4f0;
  --bg-widget-head: #f0d0ea;
  --bg-row-alt: #fceef8;
  --pink: #f7a8d0;
  --pink-soft: #ffd6ea;
  --pink-deep: #e87bb8;
  --lavender: #cbb6f0;
  --periwinkle: #b8b4f5;
  --mint: #c8f0e0;
  --cream: #fff8fc;
  --blue-soft: #b8d8f0;
  --yellow-soft: #ffe9a8;
  --text: #5a2d6e;
  --text-dark: #4a1f5c;
  --muted: #8a6a9a;
  --border: #9b4d8a;
  --border-dark: #7a3a6e;
  --shadow: #c48bb8;
  --link: #a14a9a;
  --link-hover: #d458b0;
  --white: #ffffff;
  --max-w: 920px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  /* pink pixel arrow — hotspot at tip */
  cursor: url("assets/cursor-pink.png?v=3") 13 6, auto;
}

a,
button,
label,
summary,
input[type="submit"],
input[type="button"],
.mp-btn,
.win-btn,
.shop-cta,
.badge-88x31 {
  cursor: url("assets/cursor-pink.png?v=3") 13 6, pointer;
}

body {
  margin: 0;
  padding: 20px 12px 40px;
  min-height: 100vh;
  font-family: 'VT323', 'Press Start 2P', monospace;
  font-size: 20px;
  line-height: 1.35;
  color: var(--text);
  background-color: var(--bg-page);
  background-image:
    radial-gradient(circle at 12px 18px, #e8d4f8 1.5px, transparent 1.6px),
    radial-gradient(circle at 40px 48px, #f7c8e0 1.2px, transparent 1.3px),
    linear-gradient(165deg, var(--bg-page) 0%, var(--bg-page-2) 45%, #ebe4ff 100%);
  background-size: 56px 56px, 56px 56px, 100% 100%;
  background-attachment: fixed;
}

a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 2px;
}

a:hover {
  color: var(--link-hover);
}

a:focus-visible {
  outline: 2px dashed var(--pink-deep);
  outline-offset: 2px;
}

img {
  max-width: 100%;
  height: auto;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* ---- site shell ---- */
.site-wrap {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
}

/* ---- OS window chrome ---- */
.os-window {
  background: var(--pink-soft);
  border: 2px solid var(--border);
  box-shadow:
    inset 1px 1px 0 #ffeef8,
    inset -2px -2px 0 var(--pink-deep),
    4px 4px 0 var(--shadow);
  padding: 4px;
  margin-bottom: 16px;
}

.os-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: linear-gradient(180deg, var(--bg-title) 0%, #dcb0d8 100%);
  border: 1px solid var(--border);
  /* Win95-like margins around the control cluster */
  padding: 3px 3px 3px 6px;
  min-height: 26px;
}

.os-titlebar .title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  color: var(--text-dark);
  letter-spacing: 0.5px;
}

.os-titlebar .title .ico {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.win-controls {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.win-btn {
  width: 16px;
  height: 16px;
  border: none;
  background: #ffd0e6;
  padding: 0;
  cursor: url("assets/cursor-pink.png?v=3") 13 6, auto;
  box-shadow:
    inset 1px 1px 0 #fff6fb,
    inset 2px 2px 0 #ffe0ef,
    inset -1px -1px 0 #7a3a6e,
    inset -2px -2px 0 #9b4d8a;
  user-select: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  position: relative;
}

.win-btn.close:hover,
.widget-head .mini-controls .win-btn-close:hover {
  background: #ffb0c8;
}

/* CSS pixel icons — placement matches Win95, not font metrics */
.win-ico {
  display: block;
  position: relative;
  pointer-events: none;
}

/* Minimize: short bar, bottom-center */
.win-btn-min {
  align-items: flex-end;
  padding-bottom: 3px;
}
.win-btn-min .win-ico {
  width: 6px;
  height: 2px;
  background: var(--text-dark);
  margin: 0 auto;
}

/* Maximize: square with thicker top, dead center */
.win-btn-max .win-ico {
  width: 7px;
  height: 7px;
  box-sizing: border-box;
  border: 1px solid var(--text-dark);
  border-top-width: 2px;
  background: transparent;
}

/* Close: centered X */
.win-btn-close .win-ico {
  width: 8px;
  height: 8px;
}
.win-btn-close .win-ico::before,
.win-btn-close .win-ico::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9px;
  height: 2px;
  background: var(--text-dark);
  transform: translate(-50%, -50%) rotate(45deg);
}
.win-btn-close .win-ico::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.os-menubar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 4px 8px;
  background: var(--bg-window-alt);
  border: 1px solid var(--border);
  border-top: none;
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  color: var(--muted);
}

.os-menubar span {
  cursor: url("assets/cursor-pink.png?v=3") 13 6, auto;
}

.os-menubar span:hover {
  color: var(--link-hover);
}

.os-body {
  background: var(--bg-window);
  border: 1px solid var(--border);
  border-top: none;
  padding: 14px 14px 18px;
}

/* ---- widget boxes (portal feel) ---- */
.widget {
  background: var(--bg-window);
  border: 2px solid var(--border);
  box-shadow: 2px 2px 0 var(--shadow);
  margin-bottom: 12px;
  overflow: hidden;
}

.widget-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(180deg, var(--bg-widget-head) 0%, #e8b8de 100%);
  border-bottom: 2px solid var(--border);
  padding: 3px 3px 3px 8px;
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  color: var(--text-dark);
}

.widget-head .mini-controls {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.widget-head .mini-controls .win-btn {
  width: 14px;
  height: 14px;
}

.widget-head .mini-controls .win-btn-min {
  padding-bottom: 2px;
}

.widget-head .mini-controls .win-btn-min .win-ico {
  width: 5px;
  height: 2px;
}

.widget-head .mini-controls .win-btn-max .win-ico {
  width: 6px;
  height: 6px;
}

.widget-head .mini-controls .win-btn-close .win-ico {
  width: 7px;
  height: 7px;
}

.widget-head .mini-controls .win-btn-close .win-ico::before,
.widget-head .mini-controls .win-btn-close .win-ico::after {
  width: 8px;
  height: 2px;
}

.widget-head .mini-controls span.close:hover,
.win-btn.close:hover {
  background: #ffb0c8;
}

.widget-body {
  padding: 10px;
  background: var(--bg-window);
  font-size: 18px;
}

.widget-body ul {
  margin: 0;
  padding-left: 18px;
}

.widget-body li {
  margin-bottom: 6px;
}

/* ---- banner / site header ---- */
.site-banner {
  text-align: center;
  padding: 16px 12px 12px;
  background:
    linear-gradient(180deg, #f8d4ec 0%, #e8d8fc 55%, #d8e8fc 100%);
  border: 2px solid var(--border);
  box-shadow: 3px 3px 0 var(--shadow);
  margin-bottom: 12px;
  position: relative;
  overflow: hidden;
}

.site-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 10% 30%, #fff8 2px, transparent 2px),
    radial-gradient(circle at 80% 20%, #ffe9a8 2px, transparent 2px),
    radial-gradient(circle at 60% 70%, #ffd6ea 2px, transparent 2px);
  pointer-events: none;
}

.site-title {
  position: relative;
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(11px, 2.4vw, 16px);
  color: var(--white);
  font-weight: 400;
  -webkit-text-stroke: 0;
  /* thinner outline than before */
  text-shadow:
    -1px -1px 0 var(--border),
     1px -1px 0 var(--border),
    -1px  1px 0 var(--border),
     1px  1px 0 var(--border),
     2px  2px 0 var(--pink-deep);
  margin: 0 0 8px;
}

.site-tagline {
  position: relative;
  margin: 0;
  font-size: 18px;
  color: var(--text-dark);
  font-weight: 400;
}

.sparkle-text::before { content: "✦ "; color: var(--pink-deep); }
.sparkle-text::after { content: " ✦"; color: var(--pink-deep); }

/* ---- main nav ---- */
.main-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  padding: 8px;
  margin-bottom: 14px;
  background: var(--bg-window);
  border: 2px solid var(--border);
  box-shadow: 2px 2px 0 var(--shadow);
}

.main-nav a {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  text-decoration: none;
  color: var(--text-dark);
  background: linear-gradient(180deg, #fff 0%, var(--pink-soft) 100%);
  border: 2px solid var(--border);
  padding: 8px 10px;
  box-shadow: inset 1px 1px 0 #fff, 2px 2px 0 var(--shadow);
  transition: transform 0.08s ease, background 0.08s ease;
}

.main-nav a:hover,
.main-nav a:focus-visible {
  background: linear-gradient(180deg, var(--pink-soft) 0%, var(--lavender) 100%);
  transform: translate(-1px, -1px);
  outline: none;
}

.main-nav a.active {
  background: linear-gradient(180deg, var(--lavender) 0%, var(--pink) 100%);
  color: var(--text-dark);
}

/* ---- 3-column home ---- */
.home-grid {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  gap: 12px;
  align-items: start;
}

@media (max-width: 780px) {
  .home-grid {
    grid-template-columns: 1fr;
  }
}

.col-main .lead {
  font-size: 20px;
}

/* ---- typography ---- */
h1, h2, h3 {
  font-family: 'Press Start 2P', monospace;
  line-height: 1.55;
  color: var(--text-dark);
}

h1 { font-size: 13px; margin: 0 0 12px; }
h2 { font-size: 11px; margin: 16px 0 8px; color: var(--border-dark); }
h3 { font-size: 10px; margin: 12px 0 6px; }

.placeholder {
  border: 2px dashed var(--lavender);
  background: #faf5ff;
  padding: 8px 10px;
  color: var(--muted);
  font-size: 18px;
  border-radius: 2px;
}

.placeholder::before {
  content: "[PLACEHOLDER] ";
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  color: var(--pink-deep);
}

.note-box {
  border: 2px solid var(--border);
  background: #fff0f8;
  padding: 10px 12px;
  margin: 12px 0;
  box-shadow: 2px 2px 0 var(--shadow);
}

.note-box.mint {
  background: #eefaf4;
  border-color: #6aaa90;
}

.note-box.lavender {
  background: #f3eefc;
  border-color: var(--periwinkle);
}

hr.soft {
  border: none;
  border-top: 2px dotted var(--pink);
  margin: 14px 0;
}

/* ---- stickers / badges ---- */
.sticker-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 10px 0;
  align-items: center;
}

.sticker-img {
  width: 48px;
  height: 48px;
  image-rendering: pixelated;
}

.sticker-sheet {
  width: 100%;
  border: 2px solid var(--border);
  background: var(--cream);
  padding: 4px;
  box-shadow: 2px 2px 0 var(--shadow);
}

.badge-88x31 {
  display: inline-block;
  width: 88px;
  height: 31px;
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  line-height: 27px;
  text-align: center;
  color: var(--text-dark);
  text-decoration: none;
  border: 2px solid var(--border-dark);
  background: linear-gradient(90deg, var(--pink-soft), var(--lavender), var(--blue-soft));
  box-shadow: inset 1px 1px 0 #fff;
  animation: badge-shimmer 2.4s steps(2, end) infinite;
}

@keyframes badge-shimmer {
  0%, 49% { filter: brightness(1); }
  50%, 100% { filter: brightness(1.08); }
}

.blink-soft {
  animation: blink-soft 1.2s steps(1, end) infinite;
}

@keyframes blink-soft {
  0%, 55% { opacity: 1; }
  56%, 100% { opacity: 0.35; }
}

/* ---- counter ---- */
.counter {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  text-align: center;
  padding: 8px;
  background: var(--cream);
  border: 2px inset var(--pink);
  color: var(--text-dark);
}

.counter .digits {
  color: var(--pink-deep);
  letter-spacing: 2px;
}

/* ---- about ---- */
.avatar-frame {
  width: 128px;
  height: 128px;
  margin: 0 auto 12px;
  border: 3px solid var(--border);
  box-shadow: 3px 3px 0 var(--shadow);
  background: #f0f4f8;
  overflow: hidden;
  display: block;
}

.avatar-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.profile-table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
  font-size: 18px;
}

.profile-table th,
.profile-table td {
  border: 2px solid var(--border);
  padding: 8px 10px;
  text-align: left;
}

.profile-table th {
  width: 28%;
  background: var(--bg-widget-head);
  color: var(--text-dark);
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
}

.profile-table td {
  background: var(--bg-window);
}

.profile-table tr:nth-child(even) td {
  background: var(--bg-row-alt);
}

/* ---- links ---- */
.link-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.link-list li {
  margin: 0 0 10px;
  padding: 10px;
  background: var(--bg-window-alt);
  border: 2px solid var(--border);
  border-left: 6px solid var(--pink-deep);
  box-shadow: 2px 2px 0 var(--shadow);
  transition: transform 0.08s ease;
}

.link-list li:hover {
  transform: translateX(3px);
  border-color: var(--periwinkle);
}

.link-list li:nth-child(3n+2) { border-left-color: var(--periwinkle); }
.link-list li:nth-child(3n) { border-left-color: #6aaa90; }

.link-list .site-name {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  display: block;
  margin-bottom: 4px;
  text-decoration: none;
  color: var(--text-dark);
}

.link-list .site-name:hover {
  color: var(--link-hover);
}

.link-list .blurb {
  color: var(--muted);
  font-size: 18px;
}

.webring {
  text-align: center;
  margin: 16px 0;
  padding: 12px;
  border: 2px double var(--border);
  background: #f8f0ff;
}

.webring a {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  margin: 0 6px;
  text-decoration: none;
}

/* ---- guestbook ---- */
.gb-entry {
  margin: 0 0 12px;
  border: 2px solid var(--border);
  background: var(--bg-window);
  box-shadow: 2px 2px 0 var(--shadow);
}

.gb-meta {
  background: var(--bg-widget-head);
  padding: 5px 10px;
  font-size: 18px;
  color: var(--text-dark);
  border-bottom: 2px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px;
  font-weight: 600;
}

.gb-body {
  padding: 10px 12px;
}

.gb-form {
  margin-top: 16px;
  padding: 12px;
  border: 2px dashed var(--pink-deep);
  background: #fff5fb;
}

.gb-form label {
  display: block;
  font-family: 'Press Start 2P', monospace; /* same as bigger headers */
  font-size: 8px; /* keep current small size */
  line-height: 1.5;
  font-weight: 400;
  color: var(--border-dark); /* same purple as h2 headers */
  margin: 10px 0 4px;
  letter-spacing: 0;
  text-shadow: none;
  -webkit-text-stroke: 0;
}

.gb-form input,
.gb-form textarea {
  width: 100%;
  font-family: 'VT323', monospace;
  font-size: 20px;
  padding: 8px;
  background: var(--white);
  color: var(--text);
  border: 2px solid var(--border);
}

.gb-form textarea {
  min-height: 90px;
  resize: vertical;
}

.gb-form button,
.btn {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  margin-top: 12px;
  padding: 10px 14px;
  cursor: url("assets/cursor-pink.png?v=3") 13 6, pointer;
  background: linear-gradient(180deg, #fff 0%, var(--pink-soft) 100%);
  color: var(--text-dark);
  border: 2px solid var(--border);
  box-shadow: 2px 2px 0 var(--shadow);
}

.gb-form button:hover,
.btn:hover {
  background: linear-gradient(180deg, var(--pink-soft) 0%, var(--lavender) 100%);
}

.gb-thanks {
  display: none;
  margin-top: 12px;
  padding: 10px;
  border: 2px solid #6aaa90;
  background: #eefaf4;
  color: var(--text-dark);
  text-align: center;
  font-weight: 600;
}

.gb-thanks.show {
  display: block;
}

/* ---- blog ---- */
.post {
  margin: 0 0 16px;
  border: 2px solid var(--border);
  background: var(--bg-window);
  box-shadow: 2px 2px 0 var(--shadow);
}

.post-header {
  background: linear-gradient(180deg, var(--bg-widget-head) 0%, #e8d8fc 100%);
  padding: 8px 12px;
  border-bottom: 2px solid var(--border);
}

.post-header h2 {
  margin: 0 0 4px;
  font-size: 10px;
}

.post-date {
  color: var(--muted);
  font-size: 16px;
  font-weight: 400;
}

.post-body {
  padding: 12px;
}

.post-tags {
  margin-top: 8px;
  font-size: 16px;
  color: var(--pink-deep);
  font-weight: 400;
  text-align: left; /* row stays left; only # glyphs are optically centered */
  line-height: 1.4;
}
.post-tags .tags-label {
  color: var(--muted);
}
.post-tags .tag {
  display: inline-block;
  white-space: nowrap;
  margin-right: 8px;
}
.post-tags .tag .hash {
  display: inline-block;
  /* seat # on the same midline as the letters */
  transform: translateY(0.12em);
  vertical-align: baseline;
  line-height: 1;
}

/* thinner post titles on blog */
.post-header h2 {
  font-weight: 400;
  text-shadow: none;
  -webkit-text-stroke: 0;
  letter-spacing: 0;
}

.footer-mark {
  display: inline;
  transform: none;
  margin: 0;
  padding: 0;
  letter-spacing: 0;
}
.footer-name {
  display: inline;
  letter-spacing: 0;
  margin: 0;
  padding: 0;
}
.site-footer .footer-credit {
  letter-spacing: 0;
  word-spacing: 0;
}

/* ---- planet / decorative media ---- */
.planet-deco {
  display: block;
  width: 100%;
  max-width: 160px;
  margin: 8px auto;
  border: 2px solid var(--border);
  box-shadow: 2px 2px 0 var(--shadow);
  background: #c8c8f8;
}

.status-online {
  color: #5a9a7a;
  font-weight: 700;
}

.status-online::before {
  content: "● ";
  animation: blink-soft 1.4s steps(1, end) infinite;
}

/* ---- footer ---- */
.site-footer {
  text-align: center;
  padding: 12px;
  margin-top: 8px;
  border: 2px solid var(--border);
  background: var(--bg-window-alt);
  color: var(--muted);
  font-size: 16px;
  box-shadow: 2px 2px 0 var(--shadow);
}

.site-footer .best-viewed {
  margin-top: 4px;
  color: var(--border);
  font-size: 15px;
}

.inline-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin: 8px 0;
}

.inline-icons img {
  width: 28px;
  height: 28px;
}


/* ---- music player (Web Playback SDK + custom boombox UI) ---- */
.music-player {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.music-player .mp-boombox {
  padding: 10px 8px 12px;
  background: linear-gradient(180deg, #fff5fb 0%, #f3e0f8 100%);
  border: 2px solid var(--border);
  box-shadow:
    inset 1px 1px 0 #fff,
    inset -2px -2px 0 var(--pink-deep),
    2px 2px 0 var(--shadow);
}

.music-player .mp-title-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

.music-player .mp-cover {
  width: 100%;
  max-width: 200px;
  height: auto;
  display: block;
  border: 2px solid var(--border);
  box-shadow: 2px 2px 0 var(--border);
  image-rendering: auto;
  background: #fff;
  /* slightly lighter so it sits softer with the pastel UI */
  filter: brightness(1.12) saturate(0.95) contrast(0.96);
}

.music-player .mp-title {
  margin: 0;
  font-family: "Press Start 2P", monospace;
  font-size: 9px;
  line-height: 1.5;
  color: var(--text);
  text-align: center;
  letter-spacing: 0.5px;
}


.music-player .mp-speakers {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.music-player .mp-speaker {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--border-dark);
  background:
    radial-gradient(circle at 50% 50%, #fce8f4 0 30%, transparent 31%),
    repeating-radial-gradient(circle at 50% 50%, var(--pink) 0 1px, transparent 1px 3px),
    var(--pink-soft);
  box-shadow: inset 1px 1px 0 #fff, 1px 1px 0 var(--shadow);
  flex-shrink: 0;
}

.music-player .mp-eq {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  height: 18px;
  flex: 1;
}

.music-player .mp-eq i {
  display: block;
  width: 4px;
  height: 4px;
  background: var(--periwinkle);
  border: 1px solid var(--border);
}

.music-player.is-playing .mp-eq.is-on i {
  animation: mp-eq-bounce 0.7s ease-in-out infinite;
  background: var(--pink-deep);
}

.music-player.is-playing .mp-eq.is-on i:nth-child(1) { animation-delay: 0s; height: 8px; }
.music-player.is-playing .mp-eq.is-on i:nth-child(2) { animation-delay: 0.12s; height: 14px; }
.music-player.is-playing .mp-eq.is-on i:nth-child(3) { animation-delay: 0.24s; height: 10px; }
.music-player.is-playing .mp-eq.is-on i:nth-child(4) { animation-delay: 0.06s; height: 16px; }

@keyframes mp-eq-bounce {
  0%, 100% { transform: scaleY(0.45); }
  50% { transform: scaleY(1); }
}

.music-player .track-label {
  font-family: 'VT323', monospace;
  font-size: 17px;
  min-height: 2.4em;
  line-height: 1.2;
  word-break: break-word;
  padding: 6px 8px;
  background: #fffafd;
  color: var(--text);
  border: 2px solid var(--border);
  box-shadow: inset 1px 1px 0 #fff8;
}

.music-player .track-label .track-ico {
  color: var(--pink);
}

.music-player .mp-scrubber {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 8px;
  row-gap: 2px;
  margin-top: 8px;
  width: 100%;
}

.music-player .mp-scrubber input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  grid-column: 1 / -1;
  width: 100%;
  height: 10px;
  border: 2px solid var(--border);
  border-radius: 0;
  background: #fffafd;
  box-shadow: inset 1px 1px 0 #fff8;
  cursor: url("assets/cursor-pink.png?v=3") 13 6, pointer;
  outline: none;
  accent-color: var(--pink);
}

.music-player .mp-scrubber input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  background: transparent;
  border: none;
}

.music-player .mp-scrubber input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -4px;
  background: var(--pink);
  border: 2px solid var(--border);
  box-shadow: 1px 1px 0 var(--shadow);
  cursor: url("assets/cursor-pink.png?v=3") 13 6, grab;
}

.music-player .mp-scrubber input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  background: var(--pink);
  border: 2px solid var(--border);
  box-shadow: 1px 1px 0 var(--shadow);
  cursor: url("assets/cursor-pink.png?v=3") 13 6, grab;
}

.music-player .mp-time {
  grid-column: 1 / -1;
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  color: var(--text-dark);
  text-align: center;
  line-height: 1.6;
  letter-spacing: 0.5px;
  text-shadow: 1px 0 0 var(--text-dark);
}

.music-player .mp-controls {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
}

.music-player .mp-btn {
  -webkit-appearance: none;
  appearance: none;
  font-family: 'Press Start 2P', 'VT323', monospace;
  font-size: 11px;
  line-height: 1;
  min-width: 36px;
  height: 32px;
  padding: 0 4px;
  cursor: url("assets/cursor-pink.png?v=3") 13 6, pointer;
  color: var(--text-dark);
  background: #fffafd;
  border: 2px solid var(--border);
  box-shadow: 2px 2px 0 var(--shadow);
  outline: none !important;
  font-variant-emoji: text;
  font-feature-settings: "liga" 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.music-player .mp-btn::-moz-focus-inner {
  border: 0;
  padding: 0;
}

.music-player .mp-btn:hover,
.music-player .mp-btn:focus,
.music-player .mp-btn:focus-visible {
  background: var(--pink-soft);
  outline: none !important;
  box-shadow: 2px 2px 0 var(--border);
  color: var(--text-dark);
}

.music-player .mp-btn:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 var(--shadow);
}

.music-player .mp-btn[disabled] {
  opacity: 0.45;
  cursor: url("assets/cursor-pink.png?v=3") 13 6, auto;
}

.music-player .mp-btn.is-active {
  background: var(--pink-soft);
  border-color: var(--border-dark);
  color: var(--text-dark);
}

.music-player .mp-btn .ico {
  display: block;
  font-style: normal;
  color: var(--text-dark);
  font-family: 'Press Start 2P', monospace;
  font-size: 16px;
  line-height: 1;
  /* optical center: pixel fonts sit low in the em box */
  transform: translateY(-2px);
  max-width: 100%;
  max-height: 100%;
}

.music-player .mp-volume {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px 4px;
  box-sizing: border-box;
  width: 100%;
}

.music-player .mp-volume label {
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  color: var(--text-dark);
  flex-shrink: 0;
}

.music-player .mp-volume input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  flex: 0 1 auto;
  width: 70%;
  max-width: 140px;
  height: 10px;
  border: 2px solid var(--border);
  background: linear-gradient(90deg, var(--pink-soft), var(--lavender));
  box-shadow: inset 1px 1px 0 #fff;
  cursor: url("assets/cursor-pink.png?v=3") 13 6, pointer;
}

.music-player .mp-volume input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 16px;
  background: var(--cream);
  border: 2px solid var(--border-dark);
  box-shadow: 1px 1px 0 var(--shadow);
}

.music-player .mp-volume input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 16px;
  background: var(--cream);
  border: 2px solid var(--border-dark);
  border-radius: 0;
  box-shadow: 1px 1px 0 var(--shadow);
}

.music-player .mp-spotify-link {
  margin: 0;
  text-align: center;
  font-size: 14px;
}

.music-player .mp-spotify-link a {
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px dotted var(--pink-deep);
}

.music-player .mp-spotify-link a:hover {
  color: var(--link-hover);
}

.music-player .mp-note {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.25;
  text-align: center;
}


/* Connect Spotify CTA */
.music-player .mp-connect {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 8px 0 4px;
  padding: 8px;
  background: #fffafd;
  border: 2px dashed var(--pink-deep);
  box-shadow: inset 1px 1px 0 #fff8;
}

.music-player .mp-connect[hidden] {
  display: none !important;
}

.music-player .mp-status {
  margin: 0;
  font-family: 'VT323', monospace;
  font-size: 16px;
  line-height: 1.3;
  color: var(--text);
  text-align: center;
}

.music-player .mp-connect-btn {
  -webkit-appearance: none;
  appearance: none;
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  line-height: 1.4;
  padding: 8px 12px;
  cursor: url("assets/cursor-pink.png?v=3") 13 6, pointer;
  color: var(--text-dark);
  background: var(--pink-soft);
  border: 2px solid var(--border);
  box-shadow: 2px 2px 0 var(--shadow);
}

.music-player .mp-connect-btn:hover,
.music-player .mp-connect-btn:focus-visible {
  background: var(--lavender);
  outline: none;
}

.music-player .mp-connect-btn:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 var(--shadow);
}

.music-player .mp-connect-btn[hidden] {
  display: none !important;
}

.music-player.is-connected .mp-connect {
  display: none !important;
}


.about-bio p {
  margin: 0 0 12px;
  font-size: 18px;
  line-height: 1.45;
}
.about-bio .about-ps {
  margin-top: 16px;
  padding: 10px 12px;
  background: var(--bg-row-alt);
  border: 2px solid var(--border);
  box-shadow: 2px 2px 0 var(--shadow);
}


/* Match navigate list: flush left (override .widget-body ul padding-left) */
.widget-body ul.social-list {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left;
}
.social-list li {
  margin: 0 0 6px;
  text-align: left;
}
.social-list a {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  padding: 0;
  margin: 0;
  border: none;
  color: var(--link);
  text-decoration: underline;
  font-size: 17px;
  background: transparent;
}
.social-list a:hover {
  color: var(--link-hover);
  background: transparent;
  border: none;
}
.social-list a img {
  width: 28px;
  height: 28px;
  image-rendering: pixelated;
  flex-shrink: 0;
  border: none;
  background: transparent;
  vertical-align: middle;
}


.uc-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 auto 12px;
  max-width: 280px;
  padding: 6px 10px;
  background: #fff5fb;
  border: 2px solid var(--border);
  box-shadow: 2px 2px 0 var(--shadow);
}
.uc-text {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  line-height: 1.4;
  color: var(--text-dark);
  text-align: center;
  flex: 1 1 auto;
}
.uc-tick {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  background:
    linear-gradient(45deg, #ffe9a8 25%, #9b4d8a 25%, #9b4d8a 50%, #ffe9a8 50%, #ffe9a8 75%, #9b4d8a 75%);
  background-size: 8px 8px;
  border: 1px solid var(--border);
}

/* ---- auth / account ---- */
.auth-window {
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

.auth-form {
  margin-top: 8px;
  padding: 12px;
  border: 2px dashed var(--pink-deep);
  background: #fff5fb;
}

.auth-form label {
  display: block;
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  line-height: 1.5;
  font-weight: 400;
  color: var(--border-dark);
  margin: 10px 0 4px;
}

.auth-form input,
.auth-form textarea {
  width: 100%;
  font-family: 'VT323', monospace;
  font-size: 20px;
  padding: 8px;
  background: var(--white);
  color: var(--text);
  border: 2px solid var(--border);
}

.auth-form textarea {
  min-height: 90px;
  resize: vertical;
}

.auth-form button {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  margin-top: 12px;
  padding: 10px 14px;
  cursor: url("assets/cursor-pink.png?v=3") 13 6, pointer;
  background: linear-gradient(180deg, #fff 0%, var(--pink-soft) 100%);
  color: var(--text-dark);
  border: 2px solid var(--border);
  box-shadow: 2px 2px 0 var(--shadow);
}

.auth-form button:hover {
  background: linear-gradient(180deg, var(--pink-soft) 0%, var(--lavender) 100%);
}

.bio-form {
  margin-top: 0;
  border-style: solid;
  border-color: var(--lavender);
}

.bio-saved {
  display: inline-block;
  margin-left: 10px;
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  color: #6aaa90;
  vertical-align: middle;
}

.btn-logout {
  margin-top: 10px;
  width: 100%;
}

.shop-cta {
  display: inline-block;
  text-decoration: none !important;
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  padding: 12px 18px;
  background: linear-gradient(180deg, #fff 0%, var(--yellow-soft) 45%, var(--pink-soft) 100%);
  color: var(--text-dark) !important;
  border: 2px solid var(--border);
  box-shadow: 3px 3px 0 var(--shadow);
}

.shop-cta:hover {
  background: linear-gradient(180deg, var(--pink-soft) 0%, var(--lavender) 100%);
  color: var(--text-dark) !important;
}

.profile-guest {
  text-align: center;
  padding: 8px 0 12px;
}

.profile-grid {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 14px;
  align-items: start;
}

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

.character-frame {
  text-align: center;
}

.character-label {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  color: var(--muted);
  margin: 8px 0 6px;
}

.character-alt {
  border: 2px solid var(--border);
  background: #eef4f8;
}

.pf-display {
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  margin: 0 0 4px;
  color: var(--text-dark);
}

.pf-handle {
  margin: 0 0 4px;
  color: var(--link);
  font-size: 18px;
}

.pf-joined {
  margin: 0;
  font-size: 16px;
  color: var(--muted);
}

/* ---- progress widgets ---- */
.progress-widgets {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.progress-widget {
  padding: 10px;
  border: 2px solid var(--border);
  background: linear-gradient(180deg, #fffafd 0%, #fceef8 100%);
  box-shadow: 2px 2px 0 var(--shadow);
}

.pw-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  color: var(--text-dark);
  margin-bottom: 4px;
}

.pw-meta {
  font-size: 16px;
  color: var(--muted);
  margin-bottom: 6px;
}

.pw-bar {
  height: 14px;
  border: 2px solid var(--border);
  background: #fff;
  box-shadow: inset 1px 1px 0 #eee;
  overflow: hidden;
}

.pw-bar > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--pink) 0%, var(--lavender) 55%, var(--mint) 100%);
}

/* ---- badge stickers ---- */
.badge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 10px;
}

.badge-sticker {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 6px;
  text-align: center;
  background: #fffafd;
  border: 2px solid var(--border);
  box-shadow: 2px 2px 0 var(--shadow);
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  line-height: 1.4;
  color: var(--text-dark);
}

.badge-sticker img {
  image-rendering: pixelated;
}

/* ---- kind comments ---- */
.comment-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
  max-height: 280px;
  overflow-y: auto;
}

.comment-item {
  border: 2px solid var(--border);
  background: var(--bg-window);
  box-shadow: 1px 1px 0 var(--shadow);
}

.comment-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px;
  padding: 4px 10px;
  background: var(--bg-widget-head);
  border-bottom: 2px solid var(--border);
  font-size: 16px;
}

.comment-body {
  padding: 8px 10px;
  font-size: 18px;
}

.comment-form {
  margin-top: 4px;
}

/* ---- compact account links in the site header ---- */
.site-banner {
  padding-top: 40px;
}

.account-links {
  position: absolute;
  z-index: 2;
  top: 8px;
  right: 10px;
  left: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 7px;
  max-width: min(46%, 220px);
  min-height: 16px;
  font-family: 'Press Start 2P', monospace; /* same pixel font as headers */
  font-size: 7px;
  line-height: 1.5;
  text-align: right;
  color: var(--border-dark); /* same purple as h2 headers */
  pointer-events: auto;
}

.account-links a,
.account-links button {
  color: var(--border-dark);
  font: inherit;
  line-height: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  background: transparent;
  border: 0;
  padding: 2px 0;
  margin: 0;
  cursor: url("assets/cursor-pink.png?v=3") 13 6, pointer;
}

.account-links a:hover,
.account-links button:hover,
.account-links a:focus-visible,
.account-links button:focus-visible,
.account-links a.active {
  color: var(--link-hover);
}

.account-links button:focus-visible {
  outline: 2px dashed var(--pink-deep);
  outline-offset: 2px;
}

.account-links [hidden] {
  display: none !important;
}

.account-separator {
  color: var(--border);
}

@media (max-width: 480px) {
  .site-banner {
    padding-top: 14px;
  }

  .account-links {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    max-width: none;
    text-align: center;
    margin: 0 0 12px;
  }
}

.guestbook-intro {
  margin: 0 0 14px;
  font-size: 18px;
  line-height: 1.45;
}
.guestbook-intro p {
  margin: 0 0 12px;
}
.guestbook-intro .guestbook-rules {
  list-style: disc;
  margin: 0 0 12px;
  padding-left: 22px;
}
.guestbook-intro .guestbook-rules li {
  margin-bottom: 6px;
}
.guestbook-intro .guestbook-demo-note {
  font-size: 15px;
  color: var(--muted);
  margin-bottom: 0;
}

/* ============================================================
   Mini games lobby — game cards hub
   ============================================================ */

.games-lobby-intro {
  margin: 0 0 16px;
  font-size: 19px;
  line-height: 1.45;
  text-align: center;
  color: var(--text);
}

.games-lobby-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin: 0 0 8px;
}

.game-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 12px;
  background: var(--bg-window);
  border: 2px solid var(--border);
  box-shadow: 3px 3px 0 var(--shadow);
  text-decoration: none;
  color: inherit;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

a.game-card:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--pink-deep);
  color: inherit;
}

a.game-card:focus-visible {
  outline: 2px dashed var(--pink-deep);
  outline-offset: 3px;
}

.game-card-soon {
  opacity: 0.72;
  border-style: dashed;
  box-shadow: 2px 2px 0 var(--lavender);
  cursor: url("assets/cursor-pink.png?v=3") 13 6, auto;
}

.game-card-icon {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  background: linear-gradient(180deg, var(--pink-soft) 0%, var(--lavender) 100%);
  border: 2px solid var(--border);
  box-shadow: inset 1px 1px 0 #fff;
}

.game-card-body {
  flex: 1 1 auto;
  min-width: 0;
}

.game-card-title {
  margin: 0 0 6px;
  font-size: 10px;
}

.game-card-blurb {
  margin: 0 0 8px;
  font-size: 17px;
  line-height: 1.35;
  color: var(--muted);
}

.game-card-cta {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  color: var(--link);
}

.game-card-cta.muted,
.game-card-soon .game-card-cta {
  color: var(--muted);
}

a.game-card:hover .game-card-cta {
  color: var(--link-hover);
}

.about-avatar-frame {
  width: 180px;
  height: 180px;
}
.about-avatar-frame .about-profile-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  image-rendering: pixelated;
  display: block;
}

/* ============================================================
   Profile hangout hub — avatar dresser, status, updates, ideas
   ============================================================ */

.profile-grid {
  grid-template-columns: 260px 1fr;
}

.avatar-stack {
  position: relative;
  width: 128px;
  height: 128px;
  margin: 0 auto 12px;
  image-rendering: pixelated;
  background: #f3eefc;
}

.avatar-stack .avatar-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  display: block;
  pointer-events: none;
}

.avatar-picker {
  text-align: left;
  margin-top: 10px;
}

.avatar-picker-label {
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  color: var(--muted);
  margin: 8px 0 6px;
}

.avatar-opt-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 4px;
}

.avatar-opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 56px;
  padding: 4px 2px;
  border: 2px solid var(--border);
  background: #fffafd;
  box-shadow: 1px 1px 0 var(--shadow);
  font-family: 'VT323', monospace;
  font-size: 12px;
  color: var(--text);
  line-height: 1.1;
}

.avatar-opt:hover {
  background: var(--pink-soft);
}

.avatar-opt.is-active {
  border-color: var(--pink-deep);
  background: linear-gradient(180deg, #fff 0%, var(--lavender) 100%);
  box-shadow: 2px 2px 0 var(--shadow);
}

.avatar-opt-thumb {
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  background: #f3eefc;
  overflow: hidden;
  image-rendering: pixelated;
}

.avatar-opt-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
  display: block;
}

.avatar-opt-label {
  display: block;
  max-width: 52px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}


/* skin tone swatches */
.skin-swatch-row {
  gap: 8px;
}

.avatar-opt.skin-swatch {
  width: 44px;
  padding: 4px;
}

.skin-swatch-chip {
  display: block;
  width: 28px;
  height: 28px;
  border: 2px solid var(--border);
  box-shadow: 1px 1px 0 var(--shadow);
  image-rendering: pixelated;
}

.avatar-opt.skin-swatch.is-active .skin-swatch-chip {
  border-color: var(--pink-deep);
  outline: 2px solid var(--pink);
  outline-offset: 1px;
}

.avatar-stack,
.avatar-stack .avatar-layer,
.avatar-opt-thumb,
.avatar-opt-thumb img {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

#save-avatar-btn {
  margin-top: 10px;
  width: 100%;
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  padding: 8px 10px;
  border: 2px solid var(--border);
  background: linear-gradient(180deg, #fff 0%, var(--pink-soft) 100%);
  color: var(--text-dark);
  box-shadow: 2px 2px 0 var(--shadow);
}

#save-avatar-btn:hover {
  background: linear-gradient(180deg, var(--pink-soft) 0%, var(--lavender) 100%);
}

/* status pill + picker */
.pf-status-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 8px 0;
}

.status-pill {
  display: inline-block;
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  padding: 4px 8px;
  border: 2px solid var(--border);
  border-radius: 999px;
  box-shadow: 1px 1px 0 var(--shadow);
  background: #fff;
  color: var(--text-dark);
}

.status-pill.status-online {
  background: #d8f5e4;
  color: #2f7a54;
  border-color: #4a9a6e;
}

.status-pill.status-idle {
  background: #fff3c8;
  color: #8a6a10;
  border-color: #c8a830;
}

.status-pill.status-offline {
  background: #e8e8ee;
  color: #6a6a78;
  border-color: #9a9aa8;
}

.pf-status-label {
  font-size: 14px;
  color: var(--muted);
  margin: 0;
}

.pf-status-select {
  font-family: 'VT323', monospace;
  font-size: 16px;
  padding: 2px 6px;
  border: 2px solid var(--border);
  background: #fffafd;
  color: var(--text);
  box-shadow: 1px 1px 0 var(--shadow);
}

/* game score cards */
.game-score-card .pw-scores {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin: 2px 0 6px;
}

.game-score-card .pw-score {
  font-size: 17px;
  color: var(--text);
}

.game-score-card .pw-score em {
  font-style: normal;
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  color: var(--muted);
  margin-right: 4px;
}

.game-score-card .pw-score strong {
  font-weight: 700;
  color: var(--text-dark);
}

.game-score-card .pw-play {
  display: inline-block;
  margin-top: 8px;
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  color: var(--link);
  text-decoration: none;
}

.game-score-card .pw-play:hover {
  color: var(--link-hover);
}

/* site updates panel */
.updates-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.updates-list li {
  padding: 10px 12px;
  border: 2px solid var(--border);
  background: linear-gradient(180deg, #fffafd 0%, #f8f0fc 100%);
  box-shadow: 2px 2px 0 var(--shadow);
  border-left: 6px solid var(--pink-deep);
}

.updates-list li:nth-child(2) { border-left-color: var(--periwinkle); }
.updates-list li:nth-child(3) { border-left-color: #6aaa90; }
.updates-list li:nth-child(4) { border-left-color: #c8a830; }

.upd-date {
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  color: var(--muted);
  margin-right: 8px;
}

.upd-tag {
  display: inline-block;
  font-family: 'Press Start 2P', monospace;
  font-size: 6px;
  padding: 2px 6px;
  margin-right: 6px;
  border: 1px solid var(--border);
  background: var(--pink-soft);
  color: var(--text-dark);
  vertical-align: middle;
}

.updates-list strong {
  display: block;
  margin: 6px 0 2px;
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  color: var(--text-dark);
  line-height: 1.4;
}

.updates-list p {
  margin: 0;
  font-size: 17px;
  color: var(--text);
}

/* suggestion box */
.sug-intro {
  margin: 0 0 10px;
  font-size: 17px;
  color: var(--muted);
}

.sug-form {
  margin-top: 0;
  border-style: solid;
  border-color: var(--periwinkle);
}

.sug-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 220px;
  overflow-y: auto;
}

.sug-empty {
  margin: 0;
  font-size: 16px;
  color: var(--muted);
}

.sug-item {
  border: 2px solid var(--border);
  background: var(--bg-window);
  box-shadow: 1px 1px 0 var(--shadow);
}

.sug-meta {
  padding: 3px 10px;
  background: var(--bg-widget-head);
  border-bottom: 2px solid var(--border);
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  color: var(--muted);
}

.sug-body {
  padding: 8px 10px;
  font-size: 17px;
}

.badge-grid-compact {
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.badge-grid-compact .badge-sticker {
  padding: 6px 4px;
  font-size: 6px;
}

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