/* ============================================================
   WODEN — MULTIVERSE OC SITE STYLESHEET
   ------------------------------------------------------------
   Built MOBILE-FIRST: every base rule below targets small
   screens. Bigger-screen tweaks live in the @media (min-width)
   blocks near the bottom — so on a phone you only ever load
   the simple version.

   New to CSS? Look for section headers like this one. The
   variables in section 1 control almost all the color/spacing
   choices on the whole site — change a value there and it
   updates everywhere.
   ============================================================ */

/* 1. FONTS ------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;900&family=Space+Mono:wght@400;700&family=VT323&display=swap');

/* 2. THEME VARIABLES ----------------------------------------
   Palette: deep-space void + neon violet/cyan with a warm gold
   "magic" accent. Swap these hex values to reskin the whole
   site without touching anything below. */
:root{
  --void:        #05020f;
  --void-soft:   #0c0722;
  --surface:     #150c30;
  --surface-2:   #1d1245;
  --border:      #3d2a72;
  --border-soft: #2a1c54;

  --violet:      #a855f7;
  --violet-soft: #c9a2ff;
  --cyan:        #2ee6d6;
  --gold:        #f7c948;
  --magenta:     #ff6ec7;

  --text:        #ece7ff;
  --text-dim:    #a9a1cf;
  --text-faint:  #766ea3;

  --font-head:   'Orbitron', 'Segoe UI', sans-serif;
  --font-body:   -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:   'Space Mono', 'Courier New', monospace;
  --font-pixel:  'VT323', monospace;

  --radius:      14px;
  --glow-violet: 0 0 12px rgba(168,85,247,0.55);
  --glow-cyan:   0 0 12px rgba(46,230,214,0.5);
  --glow-gold:   0 0 12px rgba(247,201,72,0.5);

  --max-width:   720px;
}

/* 3. RESET --------------------------------------------------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, p, ul, ol, figure{ margin: 0; }
ul, ol{ padding: 0; list-style: none; }
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
button{ font: inherit; color: inherit; background: none; border: none; }

/* 4. BASE / BODY ---------------------------------------------- */
body{
  background: var(--void);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

/* starfield background: cheap, CSS-only, layered radial dots.
   Two sizes of "stars" tiled across a big background-size so it
   doesn't repeat obviously. No JS needed for this base layer. */
body::before{
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background-image:
    radial-gradient(1.5px 1.5px at 20px 30px, #fff, transparent),
    radial-gradient(1px 1px at 90px 80px, #fff, transparent),
    radial-gradient(2px 2px at 150px 20px, var(--cyan), transparent),
    radial-gradient(1px 1px at 60px 130px, #fff, transparent),
    radial-gradient(1.5px 1.5px at 180px 150px, var(--violet-soft), transparent),
    radial-gradient(1px 1px at 210px 60px, #fff, transparent);
  background-repeat: repeat;
  background-size: 220px 220px;
  opacity: 0.6;
}

/* soft nebula glow behind everything */
body::after{
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  background:
    radial-gradient(circle at 20% 15%, rgba(168,85,247,0.18), transparent 45%),
    radial-gradient(circle at 85% 75%, rgba(46,230,214,0.14), transparent 50%),
    var(--void);
}

/* a handful of JS-generated twinkle stars get this class */
.twinkle{
  position: fixed;
  border-radius: 50%;
  background: #fff;
  pointer-events: none;
  z-index: -1;
  animation: twinkle-pulse 3.5s ease-in-out infinite;
}
@keyframes twinkle-pulse{
  0%, 100%{ opacity: 0.15; }
  50%{ opacity: 1; }
}

/* 5. LAYOUT SHELL ---------------------------------------------- */
.page{
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 16px 48px;
}

/* top nav — mobile-first: simple stacked bar, links wrap */
.site-nav{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-soft);
  background: rgba(5,2,15,0.85);
  backdrop-filter: blur(6px);
  position: sticky;
  top: 0;
  z-index: 10;
}
.site-nav__brand{
  font-family: var(--font-head);
  font-size: 1rem;
  letter-spacing: 0.06em;
  color: var(--violet-soft);
  text-shadow: var(--glow-violet);
  white-space: nowrap;
}
.site-nav__links{
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 0.82rem;
}
.site-nav__links a{
  color: var(--text-dim);
  padding: 6px 4px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  border-bottom: 2px solid transparent;
}
.site-nav__links a:hover,
.site-nav__links a.is-active{
  color: var(--cyan);
  border-color: var(--cyan);
}

/* 6. HERO ---------------------------------------------------- */
.hero{
  text-align: center;
  padding: 40px 0 24px;
}
.hero__sigil{
  width: 140px;
  height: 140px;
  margin: 0 auto 20px;
  object-fit: contain; /* swap to "cover" if your image isn't square */
  /* border-radius: 50%; -- uncomment for a circular crop */
}
.hero__title{
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(1.8rem, 8vw, 2.6rem);
  letter-spacing: 0.04em;
  color: var(--text);
  text-shadow: var(--glow-violet);
  line-height: 1.15;
}
.hero__title span{
  color: var(--cyan);
  text-shadow: var(--glow-cyan);
}
.hero__tagline{
  margin-top: 10px;
  font-family: var(--font-mono);
  color: var(--text-dim);
  font-size: 0.95rem;
}
.hero__desc{
  margin: 18px auto 0;
  max-width: 46ch;
  color: var(--text-dim);
  font-size: 0.98rem;
}

/* 7. BUTTONS --------------------------------------------------- */
.btn-row{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 24px;
}
.btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  min-height: 44px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.btn:active{ transform: scale(0.97); }
.btn--violet{ border-color: var(--violet); box-shadow: var(--glow-violet); }
.btn--cyan{ border-color: var(--cyan); box-shadow: var(--glow-cyan); }
.btn--gold{ border-color: var(--gold); box-shadow: var(--glow-gold); }
.btn--ghost{ background: transparent; }

/* 8. SECTIONS / CARDS -------------------------------------------- */
.section{
  padding: 36px 0;
  border-top: 1px solid var(--border-soft);
}
.section:first-of-type{ border-top: none; }
.section__title{
  font-family: var(--font-head);
  font-size: 1.3rem;
  letter-spacing: 0.03em;
  color: var(--violet-soft);
  margin-bottom: 6px;
}
.section__title::before{
  content: "◆ ";
  color: var(--cyan);
}
.section__kicker{
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 4px;
  display: block;
}

.card{
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 18px;
  margin-top: 16px;
}
.card + .card{ margin-top: 14px; }
.card__title{
  font-family: var(--font-head);
  font-size: 1rem;
  color: var(--cyan);
  margin-bottom: 8px;
}
.card p + p{ margin-top: 10px; }

/* plain <h3> tags used as sub-headings inside a card (e.g. the
   "LGBTQ+" / "Disabilities" / "Other" badge category labels) —
   the global reset zeroes all margins, so without this they'd sit
   flush against whatever's above/below with no thematic styling. */
.card h3{
  font-family: var(--font-head);
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  color: var(--gold);
  margin: 0 0 10px;
}
.card h3:not(:first-child){ margin-top: 18px; }

/* stat / meta chips */
.chip-row{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.chip{
  font-family: var(--font-mono);
  font-size: 0.75rem;
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  color: var(--text-dim);
  background: var(--void-soft);
}

/* verse cards — the "one of infinite Wodens" grid */
.verse-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 16px;
}
.verse-card{
  background: linear-gradient(160deg, var(--surface), var(--surface-2));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  position: relative;
  overflow: hidden;
}
.verse-card.is-current{ border-color: var(--cyan); box-shadow: var(--glow-cyan); }
.verse-card.is-locked{ opacity: 0.55; }
.verse-card__tag{
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.verse-card__title{
  font-family: var(--font-head);
  font-size: 1.05rem;
  margin: 4px 0 8px;
  color: var(--text);
}
.verse-card__desc{ font-size: 0.9rem; color: var(--text-dim); }

/* 9. BLINKIES ROW -------------------------------------------------
   Little animated retro badges. Classic neocities/webring flair.
   Each .blinkie is sized like an old 88x31 button, scaled up
   slightly for touch. Add more by copy-pasting a <div class="blinkie">. */
.blinkie-row{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 22px;
}
.blinkie{
  width: 110px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--font-pixel);
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  border: 2px solid var(--border);
  image-rendering: pixelated;
  color: var(--text);
  background: var(--void-soft);
  animation: blinkie-flicker 1.6s steps(2) infinite;
}
.blinkie--violet{ border-color: var(--violet); color: var(--violet-soft); }
.blinkie--cyan{ border-color: var(--cyan); color: var(--cyan); }
.blinkie--gold{ border-color: var(--gold); color: var(--gold); }
@keyframes blinkie-flicker{
  0%, 100%{ opacity: 1; }
  50%{ opacity: 0.55; }
}

/* webring 88x31 slot — swap the placeholder text for the real
   webring's <img> once you grab the code from their Join page */
.webring-slot{
  width: 88px;
  height: 31px;
  margin: 20px auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--border);
  font-family: var(--font-pixel);
  font-size: 0.7rem;
  color: var(--text-faint);
}

/* 9b. BADGE ROW ----------------------------------------------------
   For image badges (webring buttons, "30+ Club" stamps, etc). The
   global reset earlier makes all <img> display:block, which is why
   they were stacking — this puts them back in a row that wraps
   instead of overflowing on narrow phones. Just add class="badge"
   to each <img> inside a .badge-row wrapper. */
.badge-row{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.badge-row .badge{
  display: inline-block;
  width: auto;
  height: auto;
  max-width: 100%;
}

/* 10. MESSAGES (home page latest + feed.html archive) ----------------
   One .message block = one in-character post. Same markup is used
   on index.html (just the newest one) and feed.html (all of them,
   newest first) — see the copy/paste instructions in those files. */
.message{
  border-left: 2px solid var(--border);
  padding: 10px 0 10px 14px;
  margin-top: 16px;
}
.message__date{
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--gold);
  display: block;
}
.message__body{
  font-size: 0.95rem;
  color: var(--text-dim);
  margin-top: 4px;
}
.message + .message{ margin-top: 22px; }

/* 11. GUESTBOOK EMBED (SmartGB iframe) -------------------------------
   Real, functional guestbook — swap the src on the iframe in oc.html
   if you ever change providers. Fixed height because most of these
   embeddable widgets don't resize themselves. */
.guestbook-frame{
  width: 100%;
  height: 480px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  margin-top: 16px;
  background: #fff; /* most guestbook widgets assume a light background */
}

/* 12. UNIVERSAL STATS GRID ------------------------------------------
   For the little label/value blocks on the OC page (species,
   pronouns, role, etc.) — mobile-first single column, two columns
   once there's room. Duplicate a .stat-item to add more rows. */
.stat-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 14px;
}
.stat-item{
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background: var(--void-soft);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 0.85rem;
}
.stat-item__label{ color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.72rem; }
.stat-item__value{ color: var(--text); text-align: right; }

/* 13. FOOTER ------------------------------------------------------ */
.site-footer{
  text-align: center;
  padding: 32px 16px 40px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-faint);
}
.site-footer a{ color: var(--text-dim); border-bottom: 1px dotted var(--text-faint); }

/* mobile nav toggle (hidden until small-screen JS wires it up) */
.nav-toggle{
  display: none;
}

/* 13. MOBILE NAV COLLAPSE ------------------------------------------
   Below ~420px wide, tuck the nav links behind a toggle so the
   header doesn't wrap into a mess on small phones. */
@media (max-width: 420px){
  .site-nav__links{
    display: none;
    width: 100%;
    order: 3;
    flex-direction: column;
    gap: 2px;
    margin-top: 10px;
  }
  .site-nav__links.is-open{ display: flex; }
  .site-nav{ flex-wrap: wrap; }
  .nav-toggle{
    display: inline-flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--cyan);
    font-size: 1.1rem;
  }
}

/* 14. LARGER SCREENS -----------------------------------------------
   Mobile-first means these only ADD enhancements once there's
   room — nothing here is required for the layout to work. */
@media (min-width: 640px){
  .verse-grid{ grid-template-columns: 1fr 1fr; }
  .hero{ padding: 64px 0 32px; }
  .page{ padding-left: 24px; padding-right: 24px; }
}

@media (min-width: 900px){
  :root{ --max-width: 860px; }
  .hero__sigil{ width: 180px; height: 180px; }
}

/* 15. CUSTOM CURSOR (desktop / precise-pointer only) ---------------
   Skipped entirely on touch devices via the pointer:fine query,
   so it never gets in the way on mobile. */
@media (pointer: fine){
  body{
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 2 L14 10 L22 12 L14 14 L12 22 L10 14 L2 12 L10 10 Z" fill="%23a855f7" stroke="%232ee6d6" stroke-width="1"/></svg>') 12 12, auto;
  }
  a, button, .btn{
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 2 L14 10 L22 12 L14 14 L12 22 L10 14 L2 12 L10 10 Z" fill="%232ee6d6" stroke="%23f7c948" stroke-width="1"/></svg>') 12 12, pointer;
  }
}

/* 16. ACCESSIBILITY: respect reduced-motion preference -------------- */
@media (prefers-reduced-motion: reduce){
  .twinkle, .blinkie, .spin-slow{ animation: none !important; }
  *{ scroll-behavior: auto !important; }
}

/* 17. SIGIL SPIN --------------------------------------------------- */
.spin-slow{ animation: spin-slow 40s linear infinite; }
@keyframes spin-slow{ to{ transform: rotate(360deg); } }
.spin-slow-rev{ animation: spin-slow-rev 30s linear infinite; }
@keyframes spin-slow-rev{ to{ transform: rotate(-360deg); } }

/* webring css */
#oc-webring-widget {
display: flex;
flex-direction: column;
align-items: center;
margin: auto;
width: fit-content;
gap: 1em;
border: 4px solid #e56b6f;
padding: 1em;
border-radius: 12px;
}
#oc-webring-title {
font-weight: bold;
}
#oc-webring-controls {
display: flex;
gap: 1em;
}