/* ============================================================
   global.css — yellowsquareisrino
   shared styles: variables, reset, body, nav, marquee, footer
   ============================================================ */

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

/* ── VARIABLES ── */
:root {
  --pink:       #ffb3c6;
  --pink-dark:  #ff6b9d;
  --yellow:     #ffe066;
  --lavender:   #d4b8f0;
  --mint:       #b8f0d4;
  --cream:      #fff8f0;
  --black:      #1a1a1a;
  --checker-a:  #ffd6e7;
  --checker-b:  #ffffff;
  --font-pixel: 'Press Start 2P', monospace;
  --font-vt:    'VT323', monospace;
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
img { display: block; max-width: 100%; }
a  { color: inherit; }

/* ── BODY ── */
body {
  font-family: var(--font-pixel);
  background: linear-gradient(180deg, #ffe4f1 0%, #e6f4ff 100%);
  background-attachment: fixed;
  min-height: 100vh;
  /* custom flower cursor */
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Ctext y='16' font-size='16'%3E🌸%3C/text%3E%3C/svg%3E") 10 10, auto;
}

/* ── MARQUEE BAR ── */
.marquee-bar {
  background: var(--black);
  color: var(--yellow);
  font-size: 9px;
  padding: 6px 0;
  overflow: hidden;
  white-space: nowrap;
  border-bottom: 3px solid var(--pink-dark);
  user-select: none;
}
.marquee-inner {
  display: inline-block;
  animation: marquee-scroll 22s linear infinite;
}
.marquee-inner span { margin: 0 36px; }

@keyframes marquee-scroll {
  from { transform: translateX(100vw); }
  to   { transform: translateX(-100%); }
}

/* ── PAGE WRAPPER ── */
.wrapper {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 20px 80px;
}

/* ── SITE HEADER ── */
.site-header {
  text-align: center;
  padding: 36px 0 12px;
}
.site-name {
  font-size: clamp(13px, 3vw, 20px);
  color: var(--black);
  text-shadow: 3px 3px 0 var(--pink-dark), 6px 6px 0 var(--lavender);
  letter-spacing: 2px;
  line-height: 1.8;
  display: inline-block;
}
.site-name .accent { color: var(--pink-dark); }

.tagline {
  font-family: var(--font-vt);
  font-size: 22px;
  color: #999;
  margin-top: 10px;
}

/* bobbing deco row */
.deco-row {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 12px 0;
  font-size: 20px;
}
.deco-row span {
  display: inline-block;
  animation: bob 2.2s ease-in-out infinite;
}
.deco-row span:nth-child(2) { animation-delay: .25s; }
.deco-row span:nth-child(3) { animation-delay: .5s;  }
.deco-row span:nth-child(4) { animation-delay: .75s; }
.deco-row span:nth-child(5) { animation-delay: 1s;   }
@keyframes bob {
  0%, 100% { transform: translateY(0);    }
  50%       { transform: translateY(-6px); }
}

/* blinking status pill */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--black);
  color: var(--yellow);
  font-size: 7px;
  padding: 7px 16px;
  margin-top: 14px;
}
.status-dot {
  width: 7px; height: 7px;
  background: var(--pink);
  border-radius: 50%;
  animation: blink-dot 1s step-start infinite;
}
@keyframes blink-dot { 50% { opacity: 0; } }

/* ── NAV ── */
nav.site-nav {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 18px 0 36px;
  flex-wrap: wrap;
}
nav.site-nav a {
  font-size: 8px;
  text-decoration: none;
  color: var(--black);
  background: var(--yellow);
  border: 2px solid var(--black);
  padding: 8px 16px;
  box-shadow: 3px 3px 0 var(--black);
  transition: transform .12s, box-shadow .12s, background .12s;
  display: inline-block;
}
nav.site-nav a:hover {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--black);
  background: var(--pink);
}
nav.site-nav a.active {
  background: var(--pink-dark);
  color: #fff;
  box-shadow: 3px 3px 0 var(--black);
}

/* ── SECTION TITLE ── */
.section-title {
  font-size: 9px;
  color: var(--black);
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.section-title::after {
  content: '';
  flex: 1;
  height: 2px;
  background: repeating-linear-gradient(
    90deg,
    var(--black) 0 6px,
    transparent 6px 10px
  );
}

/* ── PIXEL BUTTON (reusable) ── */
.px-btn {
  font-family: var(--font-pixel);
  font-size: 8px;
  padding: 10px 18px;
  background: var(--pink-dark);
  color: #fff;
  border: 2px solid var(--black);
  box-shadow: 4px 4px 0 var(--black);
  cursor: pointer;
  transition: transform .1s, box-shadow .1s;
  display: inline-block;
  text-decoration: none;
}
.px-btn:hover  { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--black); }
.px-btn:active { transform: translate(2px,  2px);  box-shadow: 2px 2px 0 var(--black); }
.px-btn.yellow { background: var(--yellow); color: var(--black); }
.px-btn.lav    { background: var(--lavender); color: var(--black); }

/* ── PIXEL BOX (white card) ── */
.px-box {
  background: #fff;
  border: 2px solid var(--black);
  box-shadow: 4px 4px 0 var(--black);
  padding: 20px 24px;
}

/* ── FOOTER ── */
footer.site-footer {
  text-align: center;
  padding: 24px 0;
  border-top: 2px solid var(--black);
  margin-top: 24px;
}
footer.site-footer p {
  font-family: var(--font-vt);
  font-size: 17px;
  color: #888;
  margin-bottom: 10px;
}
footer.site-footer .footer-icons {
  font-size: 20px;
  letter-spacing: 10px;
}

/* ── UTIL ── */
.vt { font-family: var(--font-vt); }
.text-pink { color: var(--pink-dark); }
.mt-sm { margin-top: 12px; }
.mt-md { margin-top: 24px; }
.mt-lg { margin-top: 40px; }