/* ============================================================
   base.css — Noodleraptor's single shared design system
   ------------------------------------------------------------
   One fully-commented stylesheet for every page (home, art,
   about, worlds). Extracted and cleaned up from the original
   inline <style> blocks in index.html and art.html.

   Construction order (see IMPLEMENTATION-PLAN.md §4):
   tokens -> @font-face -> reset -> base elements -> layout ->
   components -> page hooks -> responsive -> reduced-motion.

   Every rule below names the class/element it targets and the
   markup relationship, so the CSS reads alongside the flat,
   semantic HTML without surprises.
   ============================================================ */


/* ===== TOKENS ===== */

/* :root — site-wide custom properties (the palette + background).
   Targets: the document root so every element can read these via
   var(). Change a value here to re-theme the whole site from one
   place. Each property is commented with its role. */
:root {
  --bg: #08031A;            /* page background behind the tiled dino image */
  --panel: #160024;         /* main content box background (.content) */
  --panel-2: #241445;       /* sidebar background (.sidebar) */
  --accent: #ED64F5;        /* links and bold/strong text */
  --text: #ccaaff;          /* body text color */
  --heading: #dec8ff;       /* headings h1-h5 */

  /* Default tiled page background. Page hooks (.page-art) override
     this with their own image; home/about/worlds keep the dino tile. */
  --body-bg-image: url("/assets/ui/dinobackground.png");
}


/* ===== FONTS ===== */

/* @font-face — self-hosted Livvic, regular weight.
   Targets: any text using font-family 'Livvic' at weight 400 normal
   (the default body copy). font-display: swap shows fallback text
   immediately, then swaps in Livvic once the WOFF2 loads. */
@font-face {
  font-family: "Livvic";
  src: url("/assets/ui/fonts/livvic-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* @font-face — self-hosted Livvic, bold weight.
   Targets: <strong> and any weight-700 text. Same swap behavior. */
@font-face {
  font-family: "Livvic";
  src: url("/assets/ui/fonts/livvic-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* @font-face — self-hosted Livvic, regular italic.
   Targets: italicized text (e.g. names on the about page). */
@font-face {
  font-family: "Livvic";
  src: url("/assets/ui/fonts/livvic-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}


/* ===== RESET ===== */

/* Universal box-sizing reset.
   Targets: every element and its ::before/::after pseudo-elements so
   padding and borders are included in declared widths. This fixes the
   original stylesheet's bug where the selector was left empty
   (`{ box-sizing: border-box; }` matched nothing). */
*, *::before, *::after {
  box-sizing: border-box;
}


/* ===== BASE ELEMENTS ===== */

/* html — enables the art page's TOC anchor jump with a smooth glide.
   Targets: the root element. scroll-behavior lets `<a href="#top">`
   scroll smoothly with no JavaScript. */
html {
  scroll-behavior: smooth;
}

/* body — global typography and the tiled page background.
   Targets: <body> on every page. background-color is the deep base
   behind the tiled dino image (var(--body-bg-image)); page hooks
   swap the image per page. font-family sets Livvic site-wide. */
body {
  margin: 0;
  font-family: "Livvic", sans-serif;
  color: var(--text);
  background-color: var(--bg);
  background-image: var(--body-bg-image);
  background-size: 180px;
}

/* Links — the Y2K pink accent.
   Targets: every <a>. Uses --accent so link color re-themes centrally. */
a {
  color: var(--accent);
}

/* Headings — the light lavender heading color, in Livvic.
   Targets: h1-h5 across all pages (section labels, gallery labels). */
h1, h2, h3, h4, h5 {
  font-family: "Livvic", sans-serif;
  color: var(--heading);
}

/* h3 — sub-section headings (~20px). Targets: <h3>. */
h3 {
  font-size: 20px;
}

/* h4 — primary section labels like "EXPLORE!" / TOC entries (~25px).
   Targets: <h4> used for the big labeled regions. */
h4 {
  font-size: 25px;
}

/* h5 — gallery item labels on the art page (~16px).
   Targets: <h5> above each gallery section. */
h5 {
  font-size: 16px;
}

/* strong — bold/emphasized text picks up the pink accent.
   Targets: <strong> inline emphasis anywhere in body copy. */
strong {
  color: var(--accent);
}


/* ===== LAYOUT ===== */

/* .container — the centered wrapper around each page's content.
   Targets: the outer <div class="container"> on every page. Caps
   width at 900px and centers it in the viewport. */
.container {
  max-width: 900px;
  margin: 0 auto;
}

/* .layout — the three-column flex row (left sidebar, content, right).
   Targets: the <div class="layout"> holding the columns. display:flex
   lays them out side by side; per-column `order` (below) sets the
   visual left-to-right sequence independent of source order. */
.layout {
  display: flex;
}

/* .sidebar — shared base for both side columns.
   Targets: <aside class="sidebar sidebar--left|--right">. Gives the
   purple sidebar background, a fixed 200px width, padding, and
   slightly smaller text than the main column. */
.sidebar {
  background-color: var(--panel-2);
  width: 200px;
  padding: 20px;
  font-size: smaller;
}

/* .sidebar--left — the navigation/changelog column.
   Targets: the left <aside>. order:1 places it first visually;
   margin-right gaps it from the content box. */
.sidebar--left {
  order: 1;
  margin-right: 10px;
  /* Wider than the right column so the bone-button nav images render
     larger inside the bordered .panel. */
  width: 240px;
}

/* .sidebar--right — the stamps marquee column.
   Targets: the right <aside>. order:3 places it last visually;
   margin-left gaps it from the content box. */
.sidebar--right {
  order: 3;
  margin-left: 10px;
}

/* .content — the central main box.
   Targets: <main class="content">. flex:1 lets it grow to fill the
   space between the two fixed-width sidebars; order:2 sits it in the
   middle. Uses the darker --panel background. */
.content {
  background-color: var(--panel);
  flex: 1;
  padding: 20px;
  order: 2;
}


/* ===== COMPONENTS ===== */

/* .panel — the black box framed by the spiky bone-PNG border.
   Targets: <div class="panel"> (nav box, stamps box, about-page
   content boxes). border-image tiles border-clean.png around a
   transparent 28px border; padding keeps content off the spikes;
   background-clip: padding-box keeps the black fill inside the frame. */
.panel {
  background-color: #000;
  border: 28px solid transparent;
  border-image: url("/assets/ui/border-clean.png") 17 round;
  padding: 10px;
  background-clip: padding-box;
}

/* .scrollpanel — the scrolling changelog box (left sidebar).
   Targets: <div class="scrollpanel">. A fixed-height purple-to-black
   gradient box that scrolls vertically; overflow-x hidden avoids a
   sideways scrollbar; scrollbar-color themes the scrollbar in Y2K
   purples where supported. */
.scrollpanel {
  background-image: linear-gradient(purple, black);
  padding: 10px;
  /* margin-top gaps the changelog from the nav .panel above it. */
  margin-top: 20px;
  /* Taller than the nav box so several changelog entries show at once. */
  height: 260px;
  overflow-y: scroll;
  overflow-x: hidden;
  scrollbar-color: #a12aff #deb3ff;
}

/* .marquee — the vertical stamp-scroller viewport (right sidebar).
   Targets: <div class="marquee">. A fixed 100x200 window that clips
   the taller moving track inside it; position:relative anchors the
   animated track. */
.marquee {
  width: 100px;
  height: 200px;
  overflow: hidden;
  position: relative;
}

/* .marquee__track — the moving column of stamps inside .marquee.
   Targets: <div class="marquee__track">. A vertical flex column that
   animates upward forever. The markup duplicates its stamp list, so
   scrolling to -50% (the halfway point) lands on an identical copy and
   loops seamlessly. */
.marquee__track {
  display: flex;
  flex-direction: column;
  animation: scrollDown 15s linear infinite;
}

/* Stamp images within the marquee track.
   Targets: <img> inside .marquee__track. Each stamp is block-level,
   sized to the 100px viewport width, with spacing beneath it. */
.marquee__track img {
  display: block;
  width: 100px;
  height: auto;
  margin-bottom: 5px;
}

/* @keyframes scrollDown — drives the .marquee__track animation.
   Slides the track from its start up to -50% of its height. Because
   the stamps are duplicated, -50% is visually identical to 0%, so the
   loop restart is invisible. */
@keyframes scrollDown {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}

/* .nav-bones — the bone-button navigation list.
   Targets: <ul class="nav-bones"> in the left sidebar. Strips list
   bullets and adds a small left indent so the bone buttons line up. */
.nav-bones {
  list-style: none;
  /* No left indent so each bone button uses the full panel width. */
  padding-left: 0;
  margin: 0;
}

/* Bone-button images inside the nav list.
   Targets: <img> inside .nav-bones. Full-width so each bone button
   fills its list item. */
.nav-bones img {
  width: 100%;
  height: auto;
}

/* .gallery — the art page's image gallery section.
   Targets: <section class="gallery">. Spaces it from what's above and
   centers its headings/content. */
.gallery {
  margin-top: 2rem;
  text-align: center;
}

/* Gallery column container — the masonry-style CSS columns.
   Targets: the <div> directly inside .gallery. CSS `columns` flows the
   images into 3 balanced columns (stepped down to 2/1 in RESPONSIVE). */
.gallery > div {
  columns: 3;
  gap: 1.25rem;
  padding-top: 1.25rem;
}

/* Gallery images.
   Targets: <img> inside .gallery. Block-level, full column width, with
   rounded corners and spacing beneath so the column flow reads cleanly. */
.gallery img {
  display: block;
  width: 100%;
  border-radius: 5px;
  margin-bottom: 1.25rem;
}

/* .blinkie-row — wrapped rows of blinkie GIFs (about page).
   Targets: <div class="blinkie-row">. flex-wrap lets the small blinkies
   flow onto as many lines as needed; centered horizontally. */
.blinkie-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

/* .kinlist — the kin entries list (about page).
   Targets: <ul class="kinlist">. Uses the purple bullet GIF as the list
   marker and centers the list block. */
.kinlist {
  list-style-image: url("/assets/ui/purplebullet.gif");
  text-align: center;
}

/* .divider — bone/bow divider images between sections.
   Targets: <img class="divider">. Block-level and auto-centered; capped
   at container width so it never overflows on small screens. */
.divider {
  display: block;
  margin: 0 auto;
  max-width: 100%;
}

/* .center — utility to center inline/block content.
   Targets: any element; replaces the deprecated <center> tag site-wide. */
.center {
  text-align: center;
}

/* .doll — the floated page-doll portrait in the home intro paragraph.
   Targets: <img class="doll"> in the home page's welcome copy. Floats
   left at a fixed width so the intro text wraps around it (replaces the
   original inline style="float:left; margin-right:15px" per plan §3). */
.doll {
  float: left;
  width: 170px;
  margin-right: 15px;
}

/* .responsive — fluid image utility.
   Targets: <img class="responsive"> (title bar, header art, etc.).
   Scales the image to its container width while keeping aspect ratio. */
.responsive {
  width: 100%;
  height: auto;
}

/* .back-to-top — the fixed round "TOC" jump button (art page).
   Targets: <a class="back-to-top" href="#top">. Pinned to the bottom-
   right corner above all content (z-index 1000); flex centers the "TOC"
   label inside the 50px circle. Pairs with html { scroll-behavior } for
   a JS-free smooth jump to the top anchor. */
.back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: var(--heading);
  color: purple;
  text-decoration: none;
  padding: 15px;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  z-index: 1000;
}

/* .back-to-top hover state — darkens the button on pointer hover.
   Targets: .back-to-top:hover for a bit of interactive feedback. */
.back-to-top:hover {
  background-color: #555;
}


/* ===== PAGE HOOKS ===== */

/* .page-home — home page body background.
   Targets: <body class="page-home">. Keeps the default tiled dino
   image (declared on body via --body-bg-image); listed explicitly so
   the per-page intent is documented alongside the other hooks. */
.page-home {
  background-image: var(--body-bg-image);
  background-size: 180px;
}

/* .page-art — art page body background.
   Targets: <body class="page-art">. Swaps the dino tile for the purple
   sky image behind the gallery. */
.page-art {
  background-image: url("/assets/ui/purpskybg.jpg");
}

/* .page-about — about page body background.
   Targets: <body class="page-about">. Uses the tiled dino background
   to match home for a consistent theme. */
.page-about {
  background-image: var(--body-bg-image);
  background-size: 180px;
}

/* .page-worlds — worlds page body background.
   Targets: <body class="page-worlds">. Same tiled dino background as
   home/about for theme consistency. */
.page-worlds {
  background-image: var(--body-bg-image);
  background-size: 180px;
}


/* ===== RESPONSIVE ===== */

/* Small screens — stack the three columns vertically.
   Targets: the .layout row and its columns under 800px wide. flex-wrap
   lets columns drop onto new lines; sidebars go full width; content
   moves to the top (order:1) with the sidebars beneath it. */
@media (max-width: 800px) {
  .layout {
    flex-wrap: wrap;
  }

  .sidebar {
    width: 100%;
  }

  .content {
    order: 1;
  }

  .sidebar--left {
    order: 2;
  }

  .sidebar--right {
    order: 3;
  }
}

/* Gallery step-down: 3 -> 2 columns on narrower screens.
   Targets: the .gallery column container below 48rem. */
@media (max-width: 48rem) {
  .gallery > div {
    columns: 2;
  }
}

/* Gallery step-down: 2 -> 1 column on the narrowest screens.
   Targets: the .gallery column container below 32rem. */
@media (max-width: 32rem) {
  .gallery > div {
    columns: 1;
  }
}


/* ===== REDUCED MOTION ===== */

/* Honor the viewer's "reduce motion" OS/browser setting.
   Targets: .marquee__track when prefers-reduced-motion is set. Stops
   the auto-scroll so users who are sensitive to motion see the stamps
   held still instead of continuously animating (accessibility, plan §6). */
@media (prefers-reduced-motion: reduce) {
  .marquee__track {
    animation: none;
  }
}
