/* =================================================================
   AKIRU ♡ KAE — NEOCITIES SITE SHARED CSS
   Y2K WEBCORE × KAWAII PINK
   ================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Silkscreen:wght@400;700&family=Pixelify+Sans:wght@400..700&family=JetBrains+Mono&display=swap');

:root {
  --pink-deep:  #E66BA0;
  --pink-mid:   #FF9BCD;
  --pink-light: #FFD6E8;
  --pink-pale:  #FFE3F1;
  --cream:      #FFF8FC;
  --black:      #1A1A1F;
  --gold:       #FFE49C;
  --purple:     #D4B9E8;
  --text-dark:  #4A2A3A;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0;
  background-color: #FFE3F1;
  /* Tiled background — replace URL with your own tile image if you want */
  background-image: url('https://pixelsafari.neocities.org/bg/pinkgrid.png');
  background-size: 64px 64px;
  background-repeat: repeat;
  background-attachment: fixed;
  font-family: 'Silkscreen', 'MS Gothic', monospace;
  color: var(--text-dark);
  /* Pixel heart cursor — replace URL with your own if you want */
  cursor: url('https://file.garden/ardIfnXWtIq_lXzl/sym752.cur'), url('https://cdn.cursors-4u.net/previews/sexy-pink-heart-25412ebd-32.webp'), auto;
  min-height: 100vh;
  /* Custom pointer cursor for links/buttons */
a, button, .nav-card, .social-card, .sona-card, .site-nav a, .bg-music, input[type="submit"], input[type="button"] {
  cursor: url('https://file.garden/ardIfnXWtIq_lXzl/sym749.cur'), url('https://cdn.cursors-4u.net/previews/transparent-sexy-pink-heart-99f7f91c-32.webp'), pointer !important;
}

/* Custom text cursor for input fields */
input[type="text"], input[type="email"], input[type="password"], textarea, select {
  cursor: url('https://file.garden/ardIfnXWtIq_lXzl/sym744.cur'), url('https://cdn.cursors-4u.net/previews/sexy-pink-heart-handwriting-c4a37bff-32.webp'), text !important;
}
}

/* fallback gradient if bg image fails */
body { background: linear-gradient(135deg, #FFE3F1 0%, #FFD6E8 50%, #FFF8FC 100%) fixed; }
body[style*="background-image"] { background: var(--cream); }

/* =================================================================
   TOP DECO STRIP
   ================================================================= */
.top-strip {
  width: 100%;
  height: 32px;
  background: repeating-linear-gradient(90deg, #FF9BCD 0 14px, #FF6BA8 14px 28px, #FFD6E8 28px 42px, #FFE3F1 42px 56px);
  border-bottom: 3px solid var(--black);
  overflow: hidden;
}

/* =================================================================
   HEADER / NAV
   ================================================================= */
.site-header {
  background: var(--pink-deep);
  border-bottom: 3px groove var(--black);
  box-shadow: 0 4px 0 var(--pink-light);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 100;
}

.site-header .brand {
  font-family: 'Silkscreen', monospace;
  font-size: 18px;
  color: var(--gold);
  text-shadow: -2px 0 var(--black), 0 2px var(--black), 2px 0 var(--black), 0 -2px var(--black);
  letter-spacing: 2px;
  margin-right: 16px;
  text-decoration: none;
}

.site-header .brand a { color: inherit; text-decoration: none; }

.site-nav {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.site-nav a {
  font-family: 'Silkscreen', monospace;
  font-size: 11px;
  color: var(--cream);
  background: linear-gradient(180deg, var(--pink-mid), var(--pink-light));
  border: groove 2px var(--black);
  padding: 4px 10px;
  letter-spacing: 1px;
  text-decoration: none;
  text-shadow: -1px 0 var(--black), 0 1px var(--black), 1px 0 var(--black), 0 -1px var(--black);
  transition: all 0.1s ease;
}

.site-nav a:hover {
  background: var(--gold);
  color: var(--black);
  text-shadow: none;
  transform: translate(-1px, -1px);
  box-shadow: 2px 2px 0 var(--black);
}

.site-nav a.active {
  background: var(--gold);
  color: var(--black);
  text-shadow: none;
}

/* =================================================================
   MAIN CONTENT WRAPPER
   ================================================================= */
.main-wrap {
  max-width: 1080px;
  margin: 12px auto;
  padding: 0 12px;
}

/* =================================================================
   BENTO GRID (homepage)
   ================================================================= */
.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(120px, auto);
  gap: 8px;
  margin-bottom: 12px;
}

.bento > * {
  background: var(--cream);
  border: groove 3px var(--pink-deep);
  padding: 10px;
  position: relative;
}

/* bento spans */
.bento .span-2 { grid-column: span 2; }
.bento .span-3 { grid-column: span 3; }
.bento .span-4 { grid-column: span 4; }
.bento .row-2  { grid-row: span 2; }

/* =================================================================
   SECTION HEADERS
   ================================================================= */
.section-header {
  font-family: 'Silkscreen', monospace;
  font-size: 12px;
  color: var(--cream);
  background: var(--pink-deep);
  letter-spacing: 2px;
  padding: 5px 10px;
  margin: -10px -10px 8px;
  text-shadow: -1px 0 var(--black), 0 1px var(--black), 1px 0 var(--black), 0 -1px var(--black);
  border-bottom: 3px solid var(--black);
}

/* =================================================================
   HERO BANNER
   ================================================================= */
.hero {
  grid-column: span 4;
  background: #FFE3F1;
  border: groove 6px var(--black);
  padding: 24px 16px;
  text-align: center;
  position: relative;
  overflow: hidden;
  min-height: 200px;
  /* ★ REPLACE this URL with your banner image URL — set to '' to keep solid pink */
  background-image: url('');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero h1 {
  font-family: 'Silkscreen', monospace;
  font-size: 36px;
  color: var(--pink-deep);
  letter-spacing: 4px;
  margin: 0 0 4px;
  text-shadow: -1px -1px 0 var(--gold), 1px 1px 0 var(--gold), -1px 1px 0 var(--gold), 1px -1px 0 var(--gold), 2px 2px 0 var(--pink-pale), -2px -2px 0 var(--pink-pale);
  position: relative;
  z-index: 3;
}

.hero .tagline {
  font-family: 'Silkscreen', monospace;
  font-size: 12px;
  color: var(--pink-deep);
  letter-spacing: 2px;
  text-shadow: 1px 1px 0 var(--pink-pale), -1px -1px 0 var(--pink-pale), -1px 1px 0 var(--pink-pale), 1px -1px 0 var(--pink-pale);
  position: relative;
  z-index: 3;
}

/* =================================================================
   STATUS CHIPS
   ================================================================= */
.status-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
}

.status-chip {
  background: var(--pink-pale);
  border: groove 2px var(--pink-deep);
  padding: 4px 6px;
  text-align: center;
  font-family: 'Silkscreen', monospace;
  font-size: 9px;
}

.status-chip .label {
  color: var(--text-dark);
  display: block;
  margin-bottom: 3px;
  letter-spacing: 0.5px;
}

.status-chip .value {
  font-size: 10px;
  padding: 1px 6px;
  display: inline-block;
  letter-spacing: 0.5px;
}

.value.open  { background: var(--black); color: var(--cream); }
.value.ask   { background: var(--pink-mid); color: var(--text-dark); }
.value.closed{ background: var(--pink-deep); color: var(--cream); }

/* =================================================================
   NOW PLAYING (music widget)
   ================================================================= */
.music-widget {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.music-widget iframe {
  width: 100%;
  height: 80px;
  border: 2px solid var(--black);
}

/* background music (hidden autoplay) */
.bg-music {
  position: fixed;
  bottom: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  z-index: 200;
  background: var(--pink-deep);
  border: groove 2px var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.bg-music audio { display: none; }
.bg-music .note {
  font-size: 16px;
  color: var(--gold);
  text-shadow: -1px 0 var(--black), 0 1px var(--black), 1px 0 var(--black), 0 -1px var(--black);
  font-family: 'Silkscreen', monospace;
}

/* =================================================================
   VISITOR COUNTER
   ================================================================= */
.counter-box {
  text-align: center;
  font-family: 'Silkscreen', monospace;
  font-size: 10px;
  color: var(--text-dark);
}

.counter-display {
  display: inline-block;
  background: var(--black);
  color: var(--pink-mid);
  font-family: 'JetBrains Mono', monospace;
  font-size: 18px;
  padding: 4px 8px;
  letter-spacing: 4px;
  border: 2px groove var(--pink-deep);
  margin: 4px 0;
}

/* =================================================================
   STICKER WALL
   ================================================================= */
.sticker-wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 6px;
  text-align: center;
}

.sticker-wall img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  filter: saturate(1.15) contrast(0.95) brightness(1.05) sepia(0.2) hue-rotate(-15deg);
}

/* =================================================================
   88x31 BUTTONS
   ================================================================= */
.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
}

.button-row img {
  width: 88px;
  height: 31px;
  display: block;
  border: 1px solid var(--black);
  filter: saturate(1.15) contrast(0.95) brightness(1.05) sepia(0.2) hue-rotate(-15deg);
}

/* =================================================================
   NAV CARD GRID (sub-page links)
   ================================================================= */
.nav-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}

.nav-card {
  display: block;
  background: linear-gradient(180deg, var(--pink-mid), var(--pink-light));
  border: groove 2px var(--black);
  padding: 10px 8px;
  text-align: center;
  text-decoration: none;
  color: var(--cream);
  font-family: 'Silkscreen', monospace;
  font-size: 12px;
  letter-spacing: 1px;
  text-shadow: -1px 0 var(--black), 0 1px var(--black), 1px 0 var(--black), 0 -1px var(--black);
  transition: all 0.1s ease;
}

.nav-card:hover {
  background: var(--gold);
  color: var(--black);
  text-shadow: none;
  transform: translate(-2px, -2px);
  box-shadow: 3px 3px 0 var(--black);
}

.nav-card .icon {
  font-size: 20px;
  display: block;
  margin-bottom: 4px;
}

/* =================================================================
   QUOTE / RANDOM TEXT BOX
   ================================================================= */
.quote-box {
  font-family: 'Pixelify Sans', monospace;
  font-size: 13px;
  color: var(--text-dark);
  text-align: center;
  font-style: italic;
  padding: 12px;
  line-height: 1.5;
}

/* =================================================================
   GENERIC CONTENT PAGE
   ================================================================= */
.page-card {
  background: var(--cream);
  border: groove 6px var(--black);
  padding: 16px;
  margin-bottom: 12px;
}

.page-card h1 {
  font-family: 'Silkscreen', monospace;
  font-size: 18px;
  color: var(--cream);
  background: var(--pink-deep);
  letter-spacing: 2px;
  padding: 6px 10px;
  margin: -16px -16px 12px;
  text-shadow: -1px 0 var(--black), 0 1px var(--black), 1px 0 var(--black), 0 -1px var(--black);
  border-bottom: 3px solid var(--black);
  text-align: center;
}

.page-card h2 {
  font-family: 'Silkscreen', monospace;
  font-size: 13px;
  color: var(--pink-deep);
  letter-spacing: 1px;
  padding-bottom: 3px;
  border-bottom: 1px dotted var(--pink-deep);
  margin: 16px 0 8px;
  text-transform: lowercase;
}

.page-card p, .page-card li {
  font-family: 'Pixelify Sans', monospace;
  font-size: 13px;
  color: var(--text-dark);
  line-height: 1.7;
}

.page-card ul {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
}

.page-card ul li {
  padding: 2px 0 2px 18px;
  position: relative;
}

.page-card ul li::before {
  content: '★';
  position: absolute;
  left: 4px;
  color: var(--pink-deep);
}

/* =================================================================
   SONA GRID (characters page)
   ================================================================= */
.sona-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
}

.sona-card {
  display: block;
  background: var(--pink-pale);
  border: groove 3px var(--pink-deep);
  padding: 6px;
  text-align: center;
  text-decoration: none;
  color: var(--pink-deep);
  font-family: 'Silkscreen', monospace;
  font-size: 11px;
  letter-spacing: 1px;
  transition: all 0.1s ease;
}

.sona-card:hover {
  background: var(--gold);
  color: var(--black);
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--black);
}

.sona-card img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  display: block;
  margin-bottom: 6px;
  border: 2px solid var(--black);
  filter: saturate(1.15) contrast(0.95) brightness(1.05) sepia(0.2) hue-rotate(-15deg);
}

/* =================================================================
   SHRINE GRID
   ================================================================= */
.shrine-section {
  margin-bottom: 16px;
}

.shrine-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 6px;
}

.shrine-item {
  background: var(--pink-pale);
  border: groove 2px var(--pink-deep);
  padding: 8px 6px;
  text-align: center;
  font-family: 'Silkscreen', monospace;
  font-size: 10px;
  color: var(--text-dark);
  letter-spacing: 0.5px;
}

.shrine-item .stamp {
  font-size: 16px;
  margin-bottom: 4px;
}

.shrine-item .name {
  display: block;
  font-weight: bold;
  color: var(--pink-deep);
  letter-spacing: 1px;
  margin-bottom: 2px;
}

.shrine-item .blurb {
  font-size: 9px;
  color: var(--text-dark);
  line-height: 1.3;
}

/* =================================================================
   LINKS / SOCIALS LIST
   ================================================================= */
.socials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
}

.social-card {
  display: block;
  background: linear-gradient(180deg, var(--pink-mid), var(--pink-light));
  border: groove 3px var(--black);
  padding: 10px 8px;
  text-align: center;
  text-decoration: none;
  color: var(--cream);
  font-family: 'Silkscreen', monospace;
  font-size: 12px;
  letter-spacing: 1px;
  text-shadow: -1px 0 var(--black), 0 1px var(--black), 1px 0 var(--black), 0 -1px var(--black);
  transition: all 0.1s ease;
}

.social-card:hover {
  background: var(--gold);
  color: var(--black);
  text-shadow: none;
  transform: translate(-2px, -2px);
  box-shadow: 3px 3px 0 var(--black);
}

.social-card .platform {
  font-size: 14px;
  display: block;
  margin-bottom: 4px;
}

.social-card .handle {
  font-size: 10px;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0;
  text-transform: none;
}

/* =================================================================
   FOOTER
   ================================================================= */
.site-footer {
  background: var(--pink-pale);
  border-top: groove 3px var(--pink-deep);
  padding: 10px 16px;
  text-align: center;
  font-family: 'Silkscreen', monospace;
  font-size: 10px;
  color: var(--text-dark);
  letter-spacing: 1px;
  margin-top: 12px;
}

.site-footer .footer-tag {
  display: inline-block;
  background: var(--black);
  color: var(--pink-mid);
  padding: 2px 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  margin: 4px 0;
  letter-spacing: 2px;
  border: 1px solid var(--pink-deep);
}

/* =================================================================
   WEBring / friends
   ================================================================= */
.webring-box {
  text-align: center;
  font-family: 'Silkscreen', monospace;
  font-size: 10px;
  color: var(--text-dark);
}

.webring-box .ring-name {
  font-size: 12px;
  color: var(--pink-deep);
  letter-spacing: 2px;
  margin-bottom: 6px;
  display: block;
}

.webring-box .ring-nav {
  display: inline-flex;
  gap: 4px;
  margin-top: 6px;
}

.webring-box .ring-nav a {
  background: var(--pink-mid);
  color: var(--cream);
  padding: 2px 8px;
  text-decoration: none;
  border: groove 2px var(--black);
  font-size: 9px;
  letter-spacing: 1px;
  text-shadow: -1px 0 var(--black), 0 1px var(--black), 1px 0 var(--black), 0 -1px var(--black);
}

.webring-box .ring-nav a:hover {
  background: var(--gold);
  color: var(--black);
  text-shadow: none;
}

/* =================================================================
   MOBILE
   ================================================================= */
@media (max-width: 768px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento .span-3, .bento .span-4 { grid-column: span 2; }
  .hero h1 { font-size: 24px; letter-spacing: 2px; }
  .floating-sticker { display: none; }
  .site-header { flex-direction: column; align-items: stretch; }
  .site-nav { justify-content: center; }
}