/* =========================================================
   scrapbooking is fun!!! · site styles
   (the scrapbook editor has its own file too: scrapbook.css)

   1. colours, fonts and themes   2. basics and buttons
   3. windows                     4. header, menu and footer
   5. y2k bits                    6. home page
   7. other pages                 8. profile card
   9. dialogs and forms           10. cd player and shell
   11. sparkles and shouts        12. accessibility
   ========================================================= */

* {
  box-sizing: border-box;
}

/* taps count straight away on phones and tablets (no waiting to see if it's a double-tap zoom) */
html {
  touch-action: manipulation;
}

/* ---------- 1. colours, fonts and themes ----------
   two pixel fonts: silkscreen for titles and buttons, pixelify sans for reading.
   "easy-to-read font" in settings swaps them all for a plain one. */

:root {
  --title-font: "Silkscreen", "Press Start 2P", monospace;
  --body-font: "Pixelify Sans", "Silkscreen", monospace;

  --ink: #2b1640;          /* main text: a very dark purple */
  --neon-pink: #ff3fb4;
  --neon-cyan: #19e3ff;
  --neon-lime: #b6ff3b;
  --neon-yellow: #fff23b;
  --lavender: #9fd6f5;     /* soft blue for thin borders */
  --mint: #3fcf7f;
  --light-blue: #bfe9ff;
  --pastel-pink: #ffd6ec;
  --pastel-blue: #d4f0ff;

  --bg-image: none;
  --background: #bfe9ff;
  --face: #fff7fd;         /* buttons and panels */
  --primary: #ff4fa3;      /* title bars start pink... */
  --secondary: #3fcf7f;    /* ...and end green */
  --text: var(--ink);
  --surface: #ffffff;
  --grid: rgba(0,0,0,.1);
  --link: #d4148c;
  --rainbow: linear-gradient(90deg, #ff5f8f, #ffb35c, #fff25c, #6bff95, #5cd6ff, #b18cff, #ff5f8f);
}

/* scrapbook themes (used on the scrapbook page) */
.theme-scrapbook {
  --bg-image: url("../assets/backgrounds/woodendesk.jpg");
  --background: #8a5a2b;
  --face: #fff5ea;
  --primary: #b8743d;
  --secondary: #ff8fc2;
  --text: #3b2616;
  --link: #8a3f12;
}

.theme-love {
  --bg-image: url("../assets/backgrounds/love.jpg");
  --background: #ffd6e8;
  --face: #fff0f7;
  --primary: #ff2f86;
  --secondary: #ff9ccf;
  --text: #4d0f2e;
  --link: #c4006a;
}

.theme-undersea {
  --bg-image: url("../assets/backgrounds/undersea.jpg");
  --background: #0b5f78;
  --face: #effffd;
  --primary: #0a8ec4;
  --secondary: #25d6b0;
  --text: #0c3440;
  --link: #006d9c;
}

.theme-nature {
  --bg-image: url("../assets/backgrounds/nature.jpg");
  --background: #9fca77;
  --face: #f4fbe9;
  --primary: #4c9a2a;
  --secondary: #d4c93a;
  --text: #223b16;
  --link: #2e6b17;
}

.theme-dark {
  /* like google's dark mode: charcoal greys, soft white words, one bright accent */
  --bg-image: url("../assets/backgrounds/darknight.jpg");
  --background: #202124;
  --face: #303134;
  --primary: #3c4043;
  --secondary: #3c4043;
  --text: #e8eaed;
  --surface: #202124;
  --grid: rgba(255,255,255,.12);
  --link: #8ab4f8;
  --neon-pink: #f28bc0;
}

/* ---------- 2. basics and buttons ---------- */

body {
  margin: 0;
  font: 15px/1.5 var(--body-font);
  color: var(--text);
  background-color: var(--background);
}

/* the page background sits on its own layer that stays still while you scroll.
   (phones ignore "background-attachment: fixed" and stretch the picture down
   the whole page, so this way it always just fills the screen.) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--bg-image) center / cover no-repeat, var(--background);
}

/* every normal page: the frutiger picture, framed in light blue */
body.site {
  --bg-image: url("../assets/backgrounds/frutigermetrobckg.jpg");
  --background: var(--light-blue);
}

body.site::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 95;
  border: 6px solid var(--light-blue);
  pointer-events: none;
}

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

h1, h2, h3, legend, .title-bar, .nav-pill, button, .btn, summary, .drawer-toggle, th {
  font-family: var(--title-font);
  font-weight: normal;
}

h1, h2, h3 {
  letter-spacing: .5px;
}

.small-note {
  font-size: 13px;
  opacity: .85;
}

.error-note {
  min-height: 1.2em;
  margin: 4px 0;
  color: #d4145a;
}

/* buttons: the classic windows 98 "3D" bevel (light top and left, dark bottom and right),
   sharp corners, a pastel shine, and they swap edges when pressed. */
button,
.btn,
.window {
  color: var(--text);
  background: var(--face);
  border: 2px solid;
  border-color: #fff rgba(80,20,90,.6) rgba(80,20,90,.6) #fff;
  border-radius: 0;
}

button,
.btn {
  display: inline-block;
  padding: 4px 10px;
  font-size: 13px;
  text-decoration: none;
  cursor: pointer;
  background: linear-gradient(#fff 0%, #fff 45%, color-mix(in srgb, var(--face), var(--primary) 16%) 100%);
  box-shadow: inset -1px -1px rgba(80,20,90,.2), inset 1px 1px rgba(255,255,255,.8);
  transition: transform .1s, filter .1s;
}

button:hover,
.btn:hover {
  filter: brightness(1.05) saturate(1.3);
  box-shadow: inset -1px -1px rgba(80,20,90,.2), inset 1px 1px #fff, 0 0 0 2px var(--neon-cyan);
}

button:active,
.btn:active,
button.active {
  transform: translateY(1px);
  border-color: rgba(80,20,90,.6) #fff #fff rgba(80,20,90,.6);
  box-shadow: inset 1px 1px rgba(80,20,90,.25);
  background: color-mix(in srgb, var(--face), var(--primary) 24%);
}

button:disabled {
  opacity: .5;
  cursor: default;
  filter: none;
}

/* a big "press me" button: sharp, glossy, with a neon edge */
.big-button {
  display: inline-block;
  padding: 12px 22px;
  font: 18px var(--title-font);
  color: #fff;
  text-decoration: none;
  text-shadow: 2px 2px 0 rgba(80,20,90,.6);
  background: linear-gradient(180deg, #ff9ad5 0%, #ff3fb4 50%, #d4148c 51%, #ff3fb4 100%);
  border: 3px solid;
  border-color: #ffd1ec #8a0c5c #8a0c5c #ffd1ec;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--neon-pink), 5px 6px 0 4px rgba(64,160,220,.4);
  cursor: pointer;
}

.big-button.cyan {
  background: linear-gradient(180deg, #a6f3ff 0%, #19c5ff 50%, #0a8ec4 51%, #19c5ff 100%);
  border-color: #d6faff #064f6e #064f6e #d6faff;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--neon-cyan), 5px 6px 0 4px rgba(64,160,220,.4);
}

.big-button:hover {
  filter: brightness(1.1) saturate(1.2);
  transform: translateY(-2px);
}

.big-button:active {
  transform: translateY(2px);
}

/* the post button: a rainbow that slides along when you point at it */
.post-button:hover {
  background: var(--rainbow) 0 0 / 200% 100%;
  animation: slide-rainbow 1.2s linear infinite;
}

/* icons that twist when you point at them */
.twisty {
  display: inline-block;
  transition: transform .3s;
}

a:hover .twisty,
button:hover .twisty {
  animation: twist .5s ease-in-out;
}

@keyframes twist {
  30% { transform: rotate(20deg) scale(1.3); }
  60% { transform: rotate(-20deg) scale(1.3); }
}

.spin-slow {
  display: inline-block;
  animation: spin 6s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* a picture that flips over and over, like a spinning coin */
.flipper {
  display: inline-block;
  animation: flip 3s linear infinite;
}

@keyframes flip {
  to { transform: perspective(400px) rotateY(360deg); }
}

@keyframes rainbow {
  0%, 100% { color: #ff2d8f; }
  16% { color: #ff9500; }
  33% { color: #e6c700; }
  50% { color: #1fd65c; }
  66% { color: #00b4e6; }
  83% { color: #9d4dff; }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes blink {
  50% { opacity: 0; }
}

@keyframes slide-rainbow {
  to { background-position: 200% 0; }
}

.blink {
  animation: blink 1.2s steps(1) infinite;
}

.rainbow-text {
  animation: rainbow 3s linear infinite;
}

/* ---------- 3. windows ---------- */

.window {
  box-shadow: 4px 4px 0 rgba(64,160,220,.35);
}

.title-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 3px 4px 3px 8px;
  font-size: 13px;
  color: white;
  text-shadow: 1px 1px 0 rgba(0,0,0,.35);
  /* pink, a pale seam, then green, so the two colours never go muddy in the middle */
  background: linear-gradient(90deg, var(--primary), color-mix(in srgb, var(--primary), #fff 35%) 60%,
    color-mix(in srgb, var(--primary), #fff 85%) 72%, color-mix(in srgb, var(--secondary), #fff 75%) 80%, var(--secondary));
}

/* the little _ □ × boxes on the right of a title bar */
.title-bar-buttons {
  display: flex;
  gap: 2px;
}

.title-bar-buttons > * {
  width: 18px;
  height: 16px;
  padding: 0;
  font: bold 11px/12px Tahoma, sans-serif;
  text-align: center;
  text-decoration: none;
  color: #000;
  background: #f4e9ff;
  border: 2px solid;
  border-color: #fff #6b4a8a #6b4a8a #fff;
  box-shadow: none;
}

.window-body {
  padding: 12px;
}

.menu-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  background: var(--face);
  border-bottom: 2px groove rgba(255,255,255,.8);
}

/* a dotted "cut here" divider */
.cut-line {
  position: relative;
  margin: 14px 0;
  border: 0;
  border-top: 2px dashed var(--neon-pink);
  overflow: visible;
}

.cut-line::after {
  content: "✂";
  position: absolute;
  left: 10px;
  top: -13px;
  padding: 0 4px;
  color: var(--neon-pink);
  background: #fff;
}

/* ---------- 4. header, menu and footer ----------
   filled in by common.js, so they match on every page. */

.page-wrap {
  max-width: 1150px;
  margin: 0 auto;
  padding: 14px;
}

.skip-link {
  position: absolute;
  left: -9999px;
}

.skip-link:focus {
  left: 12px;
  top: 12px;
  z-index: 100;
  padding: 8px;
  background: #fff;
}

/* the title "bubble" uses your title background picture */
.site-header,
.home-banner {
  display: grid;
  gap: 8px;
  padding: 14px;
  text-align: center;
  background: url("../assets/backgrounds/titlebackgnd.jpg") center / cover;
  border: 4px solid #fff;
  outline: 3px solid var(--neon-pink);
  box-shadow: 0 0 0 9px rgba(25,227,255,.45), 6px 8px 0 9px rgba(64,160,220,.3);
}

.site-header {
  margin-bottom: 16px;
}

/* the pixel logo, with a white outline and a rainbow shimmer */
.site-logo,
.big-logo {
  margin: 0;
  font-family: var(--title-font);
  font-weight: 700;
  text-decoration: none;
  line-height: 1.1;
  color: var(--neon-pink);
  text-shadow: 3px 0 #fff, -3px 0 #fff, 0 3px #fff, 0 -3px #fff, 5px 6px 0 rgba(64,160,220,.6);
  animation: rainbow 4s linear infinite;
}

.site-logo {
  font-size: clamp(22px, 5vw, 44px);
}

.big-logo {
  font-size: clamp(28px, 7vw, 72px);
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

/* the menu buttons: sharp little tabs in pastel colours */
.nav-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  font-size: 12px;
  color: var(--ink);
  text-decoration: none;
  background: linear-gradient(#fff 0%, #fff 40%, var(--pastel-pink) 100%);
  border: 2px solid;
  border-color: #fff var(--neon-pink) var(--neon-pink) #fff;
  box-shadow: 2px 2px 0 rgba(212,20,140,.35);
}

.nav-pill:nth-child(3n+2) {
  background: linear-gradient(#fff 0%, #fff 40%, var(--pastel-blue) 100%);
  border-color: #fff #19a7e6 #19a7e6 #fff;
  box-shadow: 2px 2px 0 rgba(25,167,230,.35);
}

.nav-pill:nth-child(3n) {
  background: linear-gradient(#fff 0%, #fff 40%, #d8ffec 100%);
  border-color: #fff #2ecc71 #2ecc71 #fff;
  box-shadow: 2px 2px 0 rgba(46,204,113,.35);
}

.nav-pill:hover {
  transform: translateY(-2px);
  filter: saturate(1.4);
}

.nav-pill[aria-current="page"] {
  color: #fff;
  background: linear-gradient(var(--primary), color-mix(in srgb, var(--primary), #fff 30%));
  text-shadow: 1px 1px 0 rgba(0,0,0,.4);
}

.site-footer {
  margin-top: 18px;
  padding: 14px;
  text-align: center;
  background: rgba(255,255,255,.85);
  border: 2px dashed var(--neon-pink);
}

/* ---------- 5. y2K bits ---------- */

/* 88x31 "web buttons" like the ones at the bottom of old home pages */
.badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

.badge {
  position: relative;
  display: inline-block;
  width: 88px;
  height: 31px;
  padding-top: 5px;
  overflow: hidden;
  font: 9px/1.2 var(--title-font);
  text-align: center;
  color: white;
  text-shadow: 1px 1px #000;
  border: 2px outset #ddd;
}

.badge::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.6) 45%, transparent 60%) -100px 0 / 200px 100% no-repeat;
  animation: shine 3s ease-in-out infinite;
}

@keyframes shine {
  60%, 100% { background-position: 120px 0; }
}

.badge-pink { background: linear-gradient(#ff7ac0, #c2187a); }
.badge-green { background: linear-gradient(#9dffc4, #1a9a55); }
.badge-rainbow { background: var(--rainbow); }

/* blinkies (the little 150x20 gifs) */
.blinkies {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
}

.blinkies img {
  width: 150px;
  height: 20px;
  image-rendering: pixelated;
}

.marquee {
  overflow: hidden;
  white-space: nowrap;
  padding: 3px 0;
  font: 13px var(--title-font);
  color: var(--neon-yellow);
  background: #1a0b2e;
  border-block: 2px solid var(--neon-pink);
}

.marquee span {
  display: inline-block;
  padding-left: 100%;
  animation: scroll 22s linear infinite;
}

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

/* a green-on-black computer screen that types messages */
.terminal {
  min-height: 150px;
  padding: 10px 12px;
  font: 19px/1.25 "VT323", monospace;
  color: #4dff7a;
  text-shadow: 0 0 6px #1fff5a;
  background:
    repeating-linear-gradient(transparent 0 2px, rgba(0,0,0,.25) 2px 3px),
    #06120a;
  border: 3px inset #666;
}

.terminal .cursor {
  animation: blink .8s steps(1) infinite;
}

.counter {
  padding: 0 6px;
  font: 18px "VT323", monospace;
  letter-spacing: 3px;
  color: var(--neon-lime);
  background: #000;
  border: 2px inset #888;
}

/* a picture in a bubbly frame, for decorating */
.bubble-spot {
  aspect-ratio: 1;
  background: url("../assets/backgrounds/bubbles.jpg") center / cover;
  border: 4px solid #fff;
  outline: 3px solid var(--neon-cyan);
  display: grid;
  place-items: center;
  text-align: center;
  font: 14px var(--title-font);
  color: #fff;
  text-shadow: 2px 2px 0 #1a6fb0, -1px -1px 0 #1a6fb0;
}

/* bubble colours and sizes, to mix them up */
.bubble-spot.pink {
  outline-color: var(--neon-pink);
  text-shadow: 2px 2px 0 #c21a78, -1px -1px 0 #c21a78;
}

.bubble-spot.pink::before,
.bubble-spot.green::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  mix-blend-mode: color;
  background: var(--primary);
}

.bubble-spot.green {
  outline-color: var(--mint);
  text-shadow: 2px 2px 0 #1a8a4a, -1px -1px 0 #1a8a4a;
}

.bubble-spot.green::before {
  background: var(--mint);
}

.bubble-spot.small {
  max-width: 105px !important;
  font-size: 12px;
}

/* the words sit above the colour layer */
.bubble-spot {
  position: relative;
  isolation: isolate;
}

.bubble-spot::before {
  z-index: -1;
}

/* bubbles bob up and down, each a little differently */
.side-decor .bubble-spot {
  animation: float 4s ease-in-out infinite;
}

.side-decor .bubble-spot:nth-of-type(2n) {
  animation-duration: 5.5s;
  animation-delay: -2s;
}

/* ---------- 6. home page ---------- */

.home-frame {
  max-width: 1180px;
  margin: 0 auto;
  padding: 14px;
}

.home-banner {
  padding: 22px 12px 14px;
}

.home-banner .tagline {
  margin: 4px 0;
  font: 15px var(--title-font);
  text-shadow: 1px 1px 0 #fff;
}

.home-columns {
  display: grid;
  grid-template-columns: 220px 1fr 240px;
  gap: 14px;
  margin-top: 16px;
  align-items: start;
}

.home-columns > * {
  display: grid;
  gap: 14px;
}

.home-nav {
  display: grid;
  gap: 6px;
}

.home-nav .nav-pill {
  justify-content: flex-start;
  font-size: 13px;
}

.welcome h1 {
  margin: 0 0 6px;
  font-size: clamp(18px, 2.6vw, 28px);
  text-align: center;
}

.warning-box {
  margin: 8px auto;
  padding: 6px 10px;
  text-align: center;
  font-size: 14px;
  color: #d4145a;
  background: #fff3a8;
  border: 2px dashed #ff3fb4;
}

.about p {
  margin: 0 0 8px;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin: 16px 0 6px;
}

.update-list {
  max-height: 200px;
  overflow-y: auto;
  margin: 0;
  padding: 0 10px;
  list-style: none;
  background: #fff;
  border: 2px inset #ddd;
}

.update-list li {
  padding: 6px 0;
  border-bottom: 1px dashed var(--lavender);
}

.update-list b {
  color: var(--neon-pink);
}

.mood-box {
  display: grid;
  justify-items: center;
  gap: 6px;
  text-align: center;
}

.mood-box .big-emoji {
  font-size: 44px;
  line-height: 1;
}

.link-code {
  width: 100%;
  font: 11px monospace;
}

.forum-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}

/* the y2k decorations down both sides (only on wide screens) */
.side-decor {
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: 1;
  display: none;
  width: calc((100vw - 1200px) / 2);
  padding: 30px 14px;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  gap: 12px;
  pointer-events: none;
}

.side-decor.left {
  left: 0;
}

.side-decor.right {
  right: 0;
}

.side-decor img {
  max-width: 100%;
  filter: drop-shadow(3px 4px 0 rgba(64,160,220,.35));
}

.side-decor .bubble-spot {
  width: 100%;
  max-width: 150px;
  border-radius: 50%;
}

@media (min-width: 1440px) {
  .side-decor {
    display: flex;
  }
}

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

  .home-nav {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }
}

/* ---------- 7. other pages ---------- */

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

/* columns shrink to fit the screen instead of pushing past its edge (like an ipad turned sideways) */
.two-columns > *,
.home-columns > * {
  min-width: 0;
}

.profile-card *,
.mood-box select {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.two-columns > main,
.two-columns > aside,
.two-columns > div {
  display: grid;
  gap: 14px;
}

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

.breadcrumb {
  margin: 0 0 12px;
  padding: 4px 10px;
  background: rgba(255,255,255,.85);
  border: 1px dashed var(--neon-pink);
}

.theme-grid,
.book-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 12px;
}

.theme-card,
.book-card,
.pack-card {
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 7px;
  color: var(--ink);
  text-decoration: none;
  background: #fff;
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px var(--lavender), 4px 5px 0 2px rgba(64,160,220,.35);
  transition: transform .15s;
}

.theme-card:hover,
.book-card:hover,
.pack-card:hover {
  transform: rotate(-1deg) translateY(-3px);
}

.theme-card > img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.theme-card strong,
.book-card > a:not(.spread-holder) {
  font: 14px var(--title-font);
  color: var(--link);
}

.book-card .buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.sample-tag {
  justify-self: start;
  padding: 0 6px;
  font: 10px var(--title-font);
  color: #fff;
  background: var(--neon-pink);
}

.empty-note {
  grid-column: 1 / -1;
  opacity: .75;
}

.thread-table {
  width: 100%;
  border-collapse: collapse;
  background: white;
}

.thread-table th {
  padding: 4px 8px;
  text-align: left;
  font-size: 12px;
  background: var(--pastel-pink);
}

.thread-table td {
  padding: 8px;
  vertical-align: top;
  border: 1px solid rgba(64,160,220,.3);
}

.thread-table summary {
  cursor: pointer;
  color: var(--link);
}

/* the chat and forum sit on the plaid "forumbox" picture, with words on white cards */
.plaid {
  background: url("../assets/backgrounds/forumbox.jpg") center / cover;
}

.post {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 10px;
  margin: 8px;
  padding: 10px;
  background: rgba(255,255,255,.92);
  border: 2px solid #fff;
  box-shadow: 3px 3px 0 rgba(64,160,220,.35);
}

.post-author {
  display: grid;
  justify-items: center;
  gap: 2px;
  font: 11px var(--title-font);
  text-align: center;
  overflow-wrap: anywhere;
}

/* a square little profile picture */
.mini-photo {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  font-size: 22px;
  color: #fff;
  background: var(--rainbow) center / cover;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--lavender);
}

.post-text {
  margin: 4px 0 0;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.forum-post {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 3px solid #fff;
  box-shadow: 0 0 0 3px var(--neon-pink), 5px 6px 0 3px rgba(64,160,220,.35);
}

.forum-post > header,
.forum-post > .post-text,
.forum-post > .comments,
.forum-post > .post-actions {
  padding: 6px 8px;
  background: rgba(255,255,255,.92);
}

.forum-post header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.forum-post h2 {
  margin: 0;
  font-size: 16px;
}

/* the scrapbook inside a post keeps its shape, so flipping pages never makes the page jump */
.spread-holder {
  display: block;
  width: 100%;
  aspect-ratio: 1400 / 900;
  overflow: hidden;
  background: #fdf6ff;
}

.post-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.like-button.liked {
  color: #fff;
  background: linear-gradient(#ff7ac0, #ff3fb4);
}

.comment {
  margin: 0;
  padding: 6px 8px;
  background: var(--pastel-blue);
}

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

.forum-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* the "share" and "chat" forms */
.share-form {
  display: grid;
  gap: 8px;
  padding: 14px;
}

.share-form > * {
  margin: 0;
}

.share-form .field,
.share-form .profile-line,
.share-form .small-note,
.share-form .error-note:not(:empty) {
  padding: 4px 8px;
  background: rgba(255,255,255,.9);
}

.share-form textarea {
  min-height: 80px;
  background: #fffef2 repeating-linear-gradient(transparent 0 27px, #9fd0ff 27px 28px);
  line-height: 28px;
}

.bug-row {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 10px;
  padding: 10px;
  background: #fff;
  border-bottom: 2px dotted var(--lavender);
}

.vote-button {
  font-size: 15px;
}

.bug-status {
  padding: 0 6px;
  font: 10px var(--title-font);
  background: #fffbd1;
  border: 1px solid #e6c700;
}

.pack-card .pack-preview {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 8px;
  background: repeating-linear-gradient(45deg, #fff 0 8px, var(--pastel-pink) 8px 16px);
}

.pack-card .pack-preview img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
}

.price {
  font: 16px var(--title-font);
  color: var(--neon-pink);
}

.big-404 {
  margin: 0;
  font: clamp(80px, 20vw, 180px)/1 var(--title-font);
  text-align: center;
  color: var(--neon-pink);
  text-shadow: 4px 0 #fff, -4px 0 #fff, 0 4px #fff, 0 -4px #fff, 8px 10px 0 rgba(64,160,220,.5);
}

.legal h2 {
  margin: 18px 0 4px;
  font-size: 16px;
}

/* ---------- 8. profile card ----------
   a square background picture with the square profile picture on top */

.sign-out {
  display: block;
  width: 100%;
  margin-top: 6px;
}

.profile-card {
  position: relative;
  display: grid;
  gap: 4px;
  padding-bottom: 10px;
  color: var(--ink);
  text-decoration: none;
  background: #fff;
  border: 3px solid #fff;
  box-shadow: 0 0 0 3px var(--neon-pink), 5px 6px 0 3px rgba(64,160,220,.35);
}

.profile-banner {
  display: block;
  aspect-ratio: 1;
  background: url("../assets/backgrounds/titlebackgnd.jpg") center / cover;
}

.profile-photo {
  display: grid;
  place-items: center;
  width: 44%;
  aspect-ratio: 1;
  margin: -22% 0 0 8%;
  font-size: 40px;
  color: #fff;
  background: var(--rainbow) center / cover;
  border: 4px solid #fff;
  box-shadow: 3px 3px 0 rgba(64,160,220,.45);
}

.profile-name {
  padding: 0 10px;
  font: 16px var(--title-font);
  color: var(--link);
  overflow-wrap: anywhere;
}

.profile-mood {
  padding: 0 10px;
  font-size: 14px;
}

.profile-about {
  margin: 0 10px;
  padding: 6px 8px;
  font-size: 14px;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  background: var(--pastel-blue);
}

.profile-edit {
  padding: 0 10px;
  font: 11px var(--title-font);
  color: var(--neon-pink);
}

.profile-card:hover {
  transform: rotate(-1deg);
}

/* ---------- 9. dialogs and forms ---------- */

.dialog-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 60;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(43,22,64,.55);
}

.dialog-backdrop.open {
  display: flex;
}

.dialog {
  width: min(460px, 100%);
  max-height: 92vh;
  overflow-y: auto;
}

.field {
  display: grid;
  gap: 4px;
  margin-bottom: 10px;
}

input,
select,
textarea {
  font: 15px var(--body-font);
  padding: 5px 7px;
  color: #000;
  background: #fff;
  border: 2px inset #e4d6f5;
}

textarea {
  width: 100%;
  resize: vertical;
}

.check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0;
}

fieldset {
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 2px groove rgba(255,255,255,.8);
  background: rgba(255,255,255,.6);
}

legend {
  padding: 0 4px;
  font-size: 13px;
}

/* log in and sign up, side by side (stacked on phones) */
.account-forms {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.account-form {
  padding: 8px 10px;
  margin: 8px 0;
  background: var(--pastel-blue);
  border: 2px dashed var(--lavender);
}

.account-form h3 {
  margin: 0 0 6px;
  font-size: 15px;
}

.account-form input {
  width: 100%;
}

/* the recovery code: big, easy to copy down */
.code-box {
  padding: 10px 12px;
  background: var(--pastel-pink);
  border: 3px dashed var(--neon-pink);
}

.recovery-code {
  font: 24px "VT323", monospace;
  letter-spacing: 3px;
  text-align: center;
  user-select: all;
  word-break: break-all;
}

.photo-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.photo-choice {
  display: grid;
  gap: 4px;
  justify-items: start;
}

.photo-preview {
  width: 110px;
  aspect-ratio: 1;
  background: var(--rainbow) center / cover;
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px var(--lavender);
}

.control-panel {
  max-width: 780px;
  margin: 0 auto;
}

.big-choice {
  width: 100%;
  margin-top: 12px;
  padding: 9px;
}

/* ---------- 10. CD player and shell ---------- */

body.shell {
  margin: 0;
  overflow: hidden;
}

body.shell::before {
  display: none;
}

#site {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.player {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 70;
}

.player-disc,
.player-disc:hover,
.player-disc:active {
  display: block;
  width: 64px;
  height: 64px;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  filter: drop-shadow(2px 3px 3px rgba(0,0,0,.35));
}

.player.waiting .player-disc {
  animation: float 1.2s ease-in-out infinite;
}

/* a cd: a shiny rainbow disc with its label in the middle */
.cd {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 18%, rgba(255,255,255,.35) 19% 20%, transparent 21%),
    conic-gradient(from 20deg, #e8e8f0, #ffd1f0, #c9f5ff, #fffac2, #e3ccff, #c9ffe0, #e8e8f0, #ffd1f0, #c9f5ff, #e8e8f0);
  border: 1px solid #b9b3c9;
}

.cd-label {
  position: absolute;
  inset: 28%;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.8);
}

/* the hole in the middle */
.cd::after {
  content: "";
  position: absolute;
  inset: 45%;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 1px #aaa;
}

.cd.spinning {
  animation: spin 2.5s linear infinite;
}

.cd.big {
  flex: 0 0 90px;
  width: 90px;
  height: 90px;
}

.player-panel {
  position: absolute;
  left: 0;
  bottom: 74px;
  width: min(300px, calc(100vw - 32px));
  max-height: calc(100vh - 110px);
  overflow-y: auto;
  transition: transform .25s;
}

/* closed: slid off to the side (not hidden), so the song keeps playing */
.player-panel.tucked {
  transform: translateX(calc(-100% - 40px));
}

.player-now {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  font-family: var(--title-font);
}

.player-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-bottom: 8px;
}

.player-volume {
  display: flex;
  align-items: center;
  gap: 4px;
}

.player-volume input {
  width: 90px;
}

.youtube-box {
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-bottom: 8px;
  background: #000;
}

.youtube-box iframe {
  width: 100%;
  height: 100%;
}

.player-list {
  margin: 0 0 8px;
  padding-left: 22px;
}

.player-list button {
  padding: 1px 6px;
  text-align: left;
  background: none;
  border: 0;
  box-shadow: none;
}

.player-list button.active {
  color: var(--neon-pink);
}

.player-link {
  display: flex;
  gap: 4px;
  margin-top: 8px;
}

.player-link input {
  flex: 1;
  min-width: 0;
}

.player-embed iframe {
  width: 100%;
  height: 152px;
  margin-top: 8px;
  border: 0;
}

/* ---------- 11. sparkles and shouts ---------- */

.burst {
  position: fixed;
  z-index: 99;
  font-size: 20px;
  pointer-events: none;
  animation: burst .8s ease-out forwards;
}

@keyframes burst {
  to { transform: translate(var(--dx), var(--dy)) scale(.3) rotate(200deg); opacity: 0; }
}

.shout {
  position: fixed;
  z-index: 99;
  font: 40px var(--title-font);
  color: #fff;
  text-shadow: 3px 3px 0 var(--neon-pink), -2px -2px 0 var(--secondary);
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation: shout 1.1s ease-out forwards;
}

@keyframes shout {
  0% { transform: translate(-50%, -50%) scale(.3) rotate(-10deg); opacity: 0; }
  25% { transform: translate(-50%, -110%) scale(1.3) rotate(4deg); opacity: 1; }
  100% { transform: translate(-50%, -180%) scale(1) rotate(0); opacity: 0; }
}

/* the sparkles that follow the mouse on the home page */
.sparkle {
  position: fixed;
  z-index: 66;
  pointer-events: none;
  font-size: 16px;
  animation: sparkle-fall 1s ease-out forwards;
}

@keyframes sparkle-fall {
  to { transform: translateY(40px) scale(.2) rotate(180deg); opacity: 0; }
}

/* ---------- 12. accessibility ----------
   settings add these classes to <html> (see common.js). */

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

/* reduce motion: no animations, blinking, sparkles or scrolling
   (also on when the computer itself asks for less motion) */
.reduce-motion *,
.reduce-motion *::before,
.reduce-motion *::after {
  animation: none !important;
  transition: none !important;
}

.reduce-motion .marquee span {
  padding-left: 0;
}

.reduce-motion .blinkies img {
  visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  .marquee span {
    padding-left: 0;
  }
}

.big-text body {
  font-size: 18px;
}

.big-text button,
.big-text .btn {
  padding: 8px 14px;
  font-size: 15px;
}

.big-text .nav-pill {
  font-size: 15px;
}

/* high contrast: plain black and white, no background pictures */
.high-contrast body {
  --bg-image: none;
  --background: #fff;
  --face: #fff;
  --text: #000;
  --ink: #000;
  --primary: #000;
  --secondary: #000;
  --link: #0000cc;
}

.high-contrast button,
.high-contrast .btn,
.high-contrast .window,
.high-contrast .nav-pill,
.high-contrast .drawer-toggle,
.high-contrast .big-button {
  color: #000 !important;
  background: #fff !important;
  border-color: #000 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

.high-contrast .site-header,
.high-contrast .home-banner,
.high-contrast .plaid {
  background: #fff !important;
}

.high-contrast .site-logo,
.high-contrast .big-logo {
  color: #000 !important;
  text-shadow: none;
}

/* easy-to-read font: swaps every pixel font for a clear, plain one */
.easy-font {
  --title-font: "Atkinson Hyperlegible", Verdana, sans-serif;
  --body-font: "Atkinson Hyperlegible", Verdana, sans-serif;
}

/* on phones the cd sits in the top corner, out of the way of the tools at the bottom */
@media (max-width: 760px) {
  .player {
    left: auto;
    right: 10px;
    top: 10px;
    bottom: auto;
  }

  .player-disc,
  .player-disc:hover,
  .player-disc:active {
    width: 44px;
    height: 44px;
  }

  .player-panel {
    left: auto;
    right: 0;
    top: 54px;
    bottom: auto;
  }

  .player-panel.tucked {
    transform: translateX(calc(100% + 40px));
  }

  /* in the editor the top corner has buttons, so the cd moves to the empty spot left of the page arrows */
  [data-page="scrapbook"] .player {
    left: 10px;
    right: auto;
    top: auto;
    bottom: 150px;
  }

  [data-page="scrapbook"] .player-panel {
    left: 0;
    right: auto;
    top: auto;
    bottom: 54px;
    max-height: calc(100vh - 240px);
  }

  [data-page="scrapbook"] .player-panel.tucked {
    transform: translateX(calc(-100% - 40px));
  }
}

/* ---------- friends and messages ---------- */

/* someone's photo and name, linked to their profile */
.person {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--link);
}

.person .mini-photo {
  width: 28px;
  height: 28px;
}

.post-author .person {
  flex-direction: column;
  gap: 2px;
}

.post-author .person .mini-photo,
.forum-post header .person .mini-photo {
  width: 48px;
  height: 48px;
}

.friend-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--lavender);
}

.friend-row .person {
  flex: 1;
}

.message-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 55vh;
  overflow-y: auto;
  padding: 8px;
  background: var(--pastel-blue);
  border: 2px inset #eee;
}

/* your messages on the right in pink, theirs on the left in green */
.message {
  max-width: 80%;
  margin: 0;
  padding: 6px 10px;
  overflow-wrap: anywhere;
  border: 2px solid #fff;
}

.message.mine {
  align-self: flex-end;
  background: var(--pastel-pink);
}

.message.theirs {
  align-self: flex-start;
  background: #d9f7e4;
}

.message small {
  display: block;
  font-size: 11px;
  opacity: .7;
}

.message-form {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

.message-form input {
  flex: 1;
  min-width: 0;
}