/* =========================================================
   YvyGrounds: Amanda Please × iCarly × Newgrounds × kawaii × Animal Crossing
   ========================================================= */

:root {
  --ink: #2b1a52;
  --lav: #c9b8f2;
  --lav-mid: #a98fe6;
  --lav-dark: #7d5ad4;
  --purple: #8a3fd1;
  --pink: #ff8cc6;
  --pink-soft: #ffd6ec;
  --orange: #ff8a1e;
  --yellow: #ffd23f;
  --teal: #37c6e6;
  --blue: #5aa8f0;
  --green: #7cc85a;
  --green-dark: #3f8f2e;
  --cream: #fff8e4;
  --ng-dark: #1c1920;
  --ng-panel: #26222c;
  --ng-orange: #ffa31a;

  --f-logo: "Chewy", "Comic Sans MS", cursive;
  --f-round: "Fredoka", "Trebuchet MS", sans-serif;
  --f-hand: "Gochi Hand", "Comic Sans MS", cursive;
  --f-pixel: "Press Start 2P", monospace;
  --f-body: Verdana, Tahoma, Geneva, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  font: 14px/1.5 var(--f-body);
  background-color: var(--lav);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cg fill='%23ffffff' fill-opacity='.45'%3E%3Cpolygon points='30,10 34,22 46,22 36,29 40,41 30,34 20,41 24,29 14,22 26,22'/%3E%3Cpolygon points='105,80 108,89 117,89 110,94 113,103 105,98 97,103 100,94 93,89 102,89'/%3E%3C/g%3E%3C/svg%3E");
  overflow-x: hidden;
}

a { color: var(--purple); }
img { max-width: 100%; }
.px { display: block; image-rendering: pixelated; }

:focus-visible { outline: 3px dashed var(--orange); outline-offset: 3px; }

/* Cropped photo frames keep the upper-middle in view by default (heads, crests).
   A photo's "focus" in data.js overrides this per image. */
.oval img, .head-photo img, .polaroid-photo img, .critter-photo img, .game-thumb img, .tv-screen img { object-position: 50% 30%; }

/* ---------- Photo wall (background) ---------- */
.photo-wall {
  position: fixed;
  inset: -40px;
  display: grid;
  gap: 18px 14px;
  justify-content: center;
  align-content: start;
  opacity: .55;
  pointer-events: none;
  z-index: 0;
}
.oval {
  width: 116px;
  height: 148px;
  border-radius: 50%;
  border: 6px solid var(--lav-mid);
  overflow: hidden;
  background: #eee;
  box-shadow: 0 0 0 3px #fff, 0 6px 0 rgba(43, 26, 82, .15);
  transform: translateY(var(--dy, 0)) rotate(var(--rot, 0deg));
}
.oval img { width: 100%; height: 100%; object-fit: cover; display: block; }
.oval-empty {
  display: grid;
  place-items: center;
  font-size: 46px;
  background: radial-gradient(circle at 35% 30%, #fff 0 18%, transparent 19%),
              linear-gradient(160deg, hsl(var(--h) 90% 90%), hsl(calc(var(--h) + 40) 85% 82%));
}

/* ---------- Ticker ---------- */
.ticker {
  position: relative;
  z-index: 2;
  overflow: hidden;
  background: var(--yellow);
  border-bottom: 3px solid var(--ink);
  font: 10px/1 var(--f-pixel);
  white-space: nowrap;
  padding: 8px 0;
}
.ticker-track {
  display: inline-flex;
  gap: 48px;
  padding-left: 48px;
  animation: ticker 40s linear infinite;
}
@keyframes ticker { to { transform: translateX(-50%); } }

/* ---------- Layout ---------- */
.site {
  position: relative;
  z-index: 1;
  max-width: 1000px;
  margin: 0 auto;
  padding: 14px 16px 40px;
}
main > section { margin-top: 28px; scroll-margin-top: 16px; }

/* ---------- Masthead ---------- */
.ng-bar {
  background: var(--ng-dark);
  color: #8a8492;
  border-radius: 10px;
  padding: 6px 14px;
  font-size: 11px;
  font-weight: bold;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  border: 2px solid #000;
}
.ng-bar a { color: #fff; text-decoration: none; }
.ng-bar a:hover { color: var(--ng-orange); }
.ng-bar-right { margin-left: auto; color: var(--ng-orange); }

.logo-row {
  position: relative;
  text-align: center;
  padding: 14px 0 0;
}
.logo { text-decoration: none; display: inline-block; }
.logo h1 {
  margin: 0;
  font: 400 clamp(52px, 12vw, 108px)/1 var(--f-logo);
  letter-spacing: 2px;
}
.logo .ltr {
  display: inline-block;
  color: var(--c);
  -webkit-text-stroke: 4px var(--ink);
  paint-order: stroke fill;
  text-shadow: 3px 3px 0 #fff, 6px 7px 0 var(--ink);
  transform: translateY(var(--y)) rotate(var(--r));
  transition: transform .2s;
}
.logo .ltr:hover { transform: translateY(calc(var(--y) - 12px)) rotate(calc(var(--r) * -1)); }
.byline {
  margin: 14px 0 0;
  font: 400 24px var(--f-hand);
  color: var(--ink);
  text-shadow: 2px 2px 0 #fff;
}
.byline span { color: var(--purple); }

.mascot {
  position: absolute;
  left: 2%;
  top: 34px;
  filter: drop-shadow(2px 0 0 var(--ink)) drop-shadow(-2px 0 0 var(--ink)) drop-shadow(0 2px 0 var(--ink)) drop-shadow(0 -2px 0 var(--ink));
  animation: bob 1.2s steps(2) infinite;
  cursor: pointer;
}
@keyframes bob { 50% { transform: translateY(-6px); } }

/* Animal Crossing speech box */
.dialog {
  position: relative;
  max-width: 640px;
  margin: 22px auto 0;
  background: var(--cream);
  border-radius: 46px / 38px;
  padding: 22px 34px 20px;
  box-shadow: 0 5px 0 #e8d9b0, 0 0 0 4px #fff;
  font: 500 17px/1.45 var(--f-round);
  cursor: pointer;
  min-height: 92px;
}
.dialog p { margin: 0; }
.dialog-name {
  position: absolute;
  top: -16px;
  left: 30px;
  background: var(--orange);
  color: #fff;
  font: 700 16px var(--f-round);
  padding: 3px 18px;
  border-radius: 999px;
  transform: rotate(-4deg);
  box-shadow: 0 3px 0 #c9630c;
}
.dialog-next {
  position: absolute;
  right: 26px;
  bottom: 8px;
  color: var(--orange);
  animation: bob .8s ease-in-out infinite;
}

/* Newgrounds-ish tab bar */
.tabs {
  display: flex;
  gap: 4px;
  margin-top: 20px;
  background: var(--ng-dark);
  border: 2px solid #000;
  border-radius: 12px;
  padding: 6px 6px 0;
  overflow-x: auto;
}
.tabs a {
  flex: 1 0 auto;
  text-align: center;
  padding: 10px 14px 8px;
  border-radius: 10px 10px 0 0;
  background: linear-gradient(#ffd25a, var(--ng-orange) 55%, #f07d00);
  border: 2px solid #000;
  border-bottom: 0;
  color: #fff;
  font: 700 17px var(--f-round);
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  -webkit-text-stroke: 1px #6b2d00;
  text-shadow: 0 2px 0 #6b2d00;
}
.tabs a:nth-child(2) { background: linear-gradient(#ffc7e6, var(--pink) 55%, #f064ad); -webkit-text-stroke-color: #7a1450; text-shadow: 0 2px 0 #7a1450; }
.tabs a:nth-child(3) { background: linear-gradient(#d9c9ff, var(--lav-mid) 55%, var(--lav-dark)); -webkit-text-stroke-color: #33196e; text-shadow: 0 2px 0 #33196e; }
.tabs a:nth-child(4) { background: linear-gradient(#c6f0a6, var(--green) 55%, #55a83a); -webkit-text-stroke-color: #1f4d15; text-shadow: 0 2px 0 #1f4d15; }
.tabs a:nth-child(5) { background: linear-gradient(#b9ecfa, var(--teal) 55%, #1aa3c4); -webkit-text-stroke-color: #0c4a5a; text-shadow: 0 2px 0 #0c4a5a; }
.tabs a:nth-child(6) { background: linear-gradient(#fff2a6, var(--yellow) 55%, #f0b400); -webkit-text-stroke-color: #6b4a00; text-shadow: 0 2px 0 #6b4a00; }
.tabs a:hover { filter: brightness(1.08); transform: translateY(-2px); }

/* ---------- Welcome card (Amanda Please) ---------- */
.welcome {
  display: grid;
  grid-template-columns: 170px 1fr 170px;
  gap: 18px;
  background: #fff;
  border-radius: 30px;
  padding: 24px 20px;
  box-shadow: 0 0 0 5px var(--lav-mid), 0 10px 0 5px rgba(43, 26, 82, .2);
}

.stickers { display: flex; flex-direction: column; gap: 16px; padding-top: 6px; }
.sticker {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 12px;
  border: 4px solid var(--ink);
  border-radius: 18px;
  font: 400 22px/1 var(--f-logo);
  color: var(--ink);
  text-decoration: none;
  box-shadow: 4px 5px 0 var(--ink);
  transition: transform .15s;
}
.sticker:nth-child(1) { transform: rotate(-4deg); }
.sticker:nth-child(2) { transform: rotate(3deg); }
.sticker:nth-child(3) { transform: rotate(-2deg); }
.sticker:hover { transform: rotate(0) scale(1.06); }
.sticker-purple { background: #c58cff; color: #fff; -webkit-text-stroke: 1px var(--ink); }
.sticker-orange { background: #ffb53d; }
.sticker-yellow { background: #fff04d; }
.sticker-icon { flex: none; }

.welcome-center { text-align: center; }
.head-row { display: flex; align-items: center; justify-content: center; gap: 4px; flex-wrap: wrap; }
.head-button {
  position: relative;
  width: 196px;
  height: 196px;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  transition: transform .2s;
}
.head-button:hover { transform: scale(1.05) rotate(-3deg); }
.head-photo {
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--yellow);
  border: 5px solid var(--ink);
  box-shadow: 0 0 0 6px var(--yellow), 0 0 0 10px var(--ink);
  display: grid;
  place-items: center;
}
.head-photo img { width: 100%; height: 100%; object-fit: cover; }
.head-star { position: absolute; width: 58px; height: 58px; }
.head-star polygon { stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }
.head-star-a { top: -6px; left: -6px; fill: var(--pink); transform: rotate(-12deg); }
.head-star-b { bottom: 0; right: -4px; fill: var(--purple); transform: rotate(14deg); }

.cloud {
  position: relative;
  background: var(--lav-mid);
  color: #fff;
  font: 400 34px/.95 var(--f-logo);
  padding: 22px 26px 18px;
  border-radius: 60% 40% 55% 45% / 55% 50% 50% 45%;
  box-shadow: -18px 10px 0 -4px var(--lav-mid), 16px -10px 0 -6px var(--lav-mid);
  text-shadow: 2px 2px 0 var(--lav-dark);
}
.cloud small { display: block; font: 700 13px var(--f-round); letter-spacing: 3px; margin-top: 4px; }

.click-hint { margin: 10px 0 0; font-size: 15px; }
.attention { margin: 18px 0 2px; font: 700 18px var(--f-body); }
.announcement { margin: 0 auto; max-width: 400px; }

.pills { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.pill {
  position: relative;
  min-width: 108px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 2px solid rgba(0, 0, 0, .25);
  color: #fff;
  font: 700 15px/1 var(--f-round);
  text-transform: uppercase;
  text-decoration: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .3);
  overflow: hidden;
}
.pill small { display: block; font-size: 9px; letter-spacing: 1px; }
.pill::before {
  content: "";
  position: absolute;
  left: 8%; right: 8%; top: 2px;
  height: 45%;
  border-radius: 999px;
  background: rgba(255, 255, 255, .5);
}
.pill-blue { background: linear-gradient(#8cc8ff, #3d8be0); }
.pill-orange { background: linear-gradient(#ffd56b, #ff9a1a); }
.pill-green { background: linear-gradient(#a7f07a, #43b82a); }
.pill:hover { filter: brightness(1.1); }

.side-right { display: flex; flex-direction: column; gap: 18px; }
.history {
  border-radius: 18px;
  overflow: hidden;
  border: 3px solid #fff;
  box-shadow: 0 0 0 3px var(--lav-dark), 5px 6px 0 3px rgba(43, 26, 82, .25);
  transform: rotate(1.5deg);
}
.history-head {
  background: var(--purple);
  color: #fff;
  text-align: center;
  font: 700 12px/1.2 var(--f-body);
  text-transform: uppercase;
  padding: 10px 6px;
}
.history-head b { font: 400 26px/1 var(--f-logo); text-transform: none; letter-spacing: 1px; }
.history-body { background: #e6d6ff; padding: 10px 12px 14px; text-align: center; font-size: 13px; }
.history-body p { margin: 0 0 6px; }
.history-date { font-weight: bold; }

/* ---------- Featured (iCarly) ---------- */
.featured {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 22px;
  align-items: center;
  padding: 22px;
  background:
    radial-gradient(circle at 92% 12%, rgba(255, 255, 255, .7) 0 30px, transparent 31px),
    linear-gradient(135deg, #ffe76a, #ffc23a);
  border: 5px solid var(--orange);
  border-radius: 28px;
  box-shadow: 0 0 0 5px var(--teal), 0 10px 0 5px rgba(0, 80, 110, .25);
}
.tv {
  position: relative;
  background: linear-gradient(#ffef8a, #ffd23f);
  border: 5px solid var(--ink);
  border-radius: 22px;
  padding: 14px 14px 12px;
  box-shadow: 6px 6px 0 var(--ink);
  transform: rotate(-1.5deg);
}
.tv-label {
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%) rotate(-3deg);
  background: var(--pink);
  color: #fff;
  border: 3px solid var(--ink);
  border-radius: 999px;
  padding: 2px 14px;
  font: 400 20px var(--f-logo);
  white-space: nowrap;
}
.tv-screen {
  aspect-ratio: 16 / 10;
  border: 6px solid #c0392b;
  border-radius: 16px;
  background: #13101a;
  display: grid;
  place-items: center;
  text-align: center;
  color: #fff;
  overflow: hidden;
  position: relative;
}
.tv-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(transparent 0 2px, rgba(0, 0, 0, .25) 2px 4px);
  pointer-events: none;
}
.tv-screen img { width: 100%; height: 100%; object-fit: cover; background: #fdf3df; }
.tv-title { font: 12px/1.6 var(--f-pixel); color: var(--yellow); margin: 10px 8px 0; }
.tv-bumper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 10px;
}
.tv-light {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff, #ff5e5e 40%, #a31515);
  border: 3px solid var(--ink);
}
.tv-play {
  background: linear-gradient(#b977ff, #7b2ff0);
  color: #fff;
  border: 3px solid var(--ink);
  border-radius: 999px;
  padding: 6px 22px;
  font: 11px var(--f-pixel);
  text-decoration: none;
  box-shadow: 0 4px 0 var(--ink);
}
.tv-play:hover { transform: translateY(2px); box-shadow: 0 2px 0 var(--ink); }

.extras h2 {
  margin: 0 0 12px;
  color: var(--purple);
  font: 700 28px var(--f-round);
  text-shadow: 2px 2px 0 #fff;
}
.extra-row {
  background: var(--purple);
  color: #fff;
  border-radius: 16px;
  padding: 12px 14px;
  margin-bottom: 12px;
  border: 3px solid #fff;
}
.extra-title { margin: 0 0 8px; font-weight: bold; font-size: 13px; }
.led {
  display: flex;
  justify-content: space-between;
  background: #000;
  border: 4px solid #555;
  border-radius: 8px;
  padding: 10px 12px;
  color: #ff3b3b;
  font: clamp(14px, 3vw, 22px)/1 var(--f-pixel);
  text-shadow: 0 0 8px rgba(255, 60, 60, .8);
}
.led-labels { display: flex; justify-content: space-between; padding: 4px 12px 0; font-size: 10px; text-transform: uppercase; opacity: .8; }
.extra-bubble { background: #fff; color: var(--ink); border-color: var(--purple); }
.extra-bubble a { display: block; margin-top: 4px; font-weight: bold; }

/* ---------- Portal (Newgrounds) ---------- */
.portal {
  background: var(--ng-dark);
  color: #ddd;
  border: 3px solid #000;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 0 rgba(43, 26, 82, .3);
}
.portal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 16px;
  background:
    linear-gradient(rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, .25)),
    linear-gradient(90deg, #ff7a00, var(--ng-orange) 40%, #ffcd4a);
  border-bottom: 3px solid #000;
}
.portal-head h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: #fff;
  font: 18px var(--f-pixel);
  text-transform: uppercase;
  text-shadow: 3px 3px 0 #000;
}
.filters { display: flex; flex-wrap: wrap; gap: 6px; }
.filter {
  font: 700 13px var(--f-round);
  text-transform: uppercase;
  background: #000;
  color: #fff;
  border: 2px solid #000;
  border-radius: 999px;
  padding: 6px 12px;
  cursor: pointer;
}
.filter:hover { background: #333; }
.filter.is-on { background: #fff; color: #000; }

.portal-body { display: grid; grid-template-columns: 210px 1fr; gap: 16px; padding: 16px; }
.portal-side { display: flex; flex-direction: column; gap: 16px; }
.latest { background: var(--ng-panel); border: 2px solid #000; border-radius: 10px; overflow: hidden; }
.latest h3 {
  margin: 0;
  padding: 8px 10px;
  background: linear-gradient(#ffc04a, #f08a00);
  color: #fff;
  font: 9px/1.4 var(--f-pixel);
  text-transform: uppercase;
  text-shadow: 2px 2px 0 #000;
}
.latest ol { margin: 0; padding: 10px 10px 10px 30px; font-size: 12px; }
.latest li { margin: 3px 0; color: #fff; }
.latest li a { color: #fff; text-decoration: none; }
.latest li a:hover { color: var(--ng-orange); }

.battle-on {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  padding: 16px 10px;
  border: 3px solid var(--yellow);
  border-radius: 10px;
  background: linear-gradient(160deg, #ff8cc6, #8a3fd1);
  color: #fff;
  font: 400 24px/1 var(--f-logo);
  text-shadow: 2px 2px 0 var(--ink);
}
.battle-on p { margin: 0; }
.battle-on small { font: 700 11px var(--f-round); }

.game-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-content: start;
}
.game {
  display: flex;
  gap: 12px;
  padding: 8px;
  border-radius: 10px;
  color: #ccc;
  text-decoration: none;
  font-size: 12px;
  line-height: 1.45;
  height: 100%;
  transition: background .15s;
}
a.game:hover { background: #34303b; }
.game-thumb {
  flex: none;
  width: 70px;
  height: 70px;
  border-radius: 8px;
  border: 2px solid #000;
  box-shadow: 0 0 0 2px #555;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.game-thumb img { width: 100%; height: 100%; object-fit: cover; background: #fdf3df; }
.game-thumb.garden { background: linear-gradient(#bfe9ff, #9be38a); }
.game-thumb.silly { background: linear-gradient(#ffd6ec, #c9b8f2); }
.game-thumb.story { background: linear-gradient(#ffe0ef, #ff9ecf); }
.game-thumb.mystery { background: linear-gradient(#fff6b0, #c9b8f2); }
.game-title { color: var(--ng-orange); font-weight: bold; text-transform: uppercase; }
.tag {
  display: inline-block;
  margin: 4px 4px 0 0;
  padding: 1px 7px;
  border-radius: 999px;
  font: 700 10px var(--f-round);
  text-transform: uppercase;
}
.tag-garden { background: var(--green); color: #12330b; }
.tag-silly { background: var(--pink); color: #4d0c30; }
.tag-story { background: #ff6fa8; color: #fff; }
.tag-mystery { background: #8a3fd1; color: #fff; }
.tag-badge { background: #6fd3f2; color: #08303d; }
.tag-new { background: var(--yellow); color: #000; animation: blink 1s steps(2) infinite; }
.tag-soon { background: #555; color: #eee; }
@keyframes blink { 50% { opacity: .35; } }
.game-empty { grid-column: 1 / -1; text-align: center; padding: 30px; color: #999; }

/* ---------- Scrapbook ---------- */
.scrapbook {
  background: #fff;
  border-radius: 26px;
  padding: 24px 20px 20px;
  text-align: center;
  box-shadow: 0 0 0 10px var(--pink-soft), 0 0 0 13px var(--pink), 0 14px 0 13px rgba(43, 26, 82, .2);
  margin-left: 13px;
  margin-right: 13px;
}
.scrap-title { margin: 0; font: 400 clamp(32px, 6vw, 46px)/1.1 var(--f-hand); letter-spacing: 2px; }
.scrap-sub { margin: 4px 0 14px; color: var(--purple); font-weight: bold; font-size: 13px; }
.scrap-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 18px; }
.scrap-tab {
  font: 600 14px var(--f-round);
  border: 3px solid var(--ink);
  background: var(--cream);
  color: var(--ink);
  border-radius: 12px;
  padding: 5px 12px;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--ink);
}
.scrap-tab[aria-selected="true"] { background: var(--yellow); transform: rotate(-2deg); }
.scrap-stage { display: flex; align-items: center; justify-content: center; gap: 14px; }

.arrow {
  flex: none;
  font: 9px var(--f-pixel);
  color: #fff;
  background: #e8572d;
  border: 0;
  padding: 8px 10px;
  cursor: pointer;
  clip-path: polygon(0 20%, 70% 20%, 70% 0, 100% 50%, 70% 100%, 70% 80%, 0 80%);
  min-width: 64px;
}
.arrow-back { clip-path: polygon(100% 20%, 30% 20%, 30% 0, 0 50%, 30% 100%, 30% 80%, 100% 80%); }
.arrow:hover { background: var(--orange); }

.polaroid {
  position: relative;
  margin: 0;
  width: min(380px, 100%);
  background: #fff;
  padding: 14px 14px 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
  border: 1px solid #ddd;
  transform: rotate(-1.5deg);
}
.polaroid::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 50%;
  width: 110px;
  height: 26px;
  transform: translateX(-50%) rotate(3deg);
  background: rgba(255, 210, 63, .65);
  border-left: 2px dashed rgba(0, 0, 0, .08);
  border-right: 2px dashed rgba(0, 0, 0, .08);
}
/* Fixed square frame: photos are cropped to fit (use "focus" in data.js to aim the crop) */
.polaroid-photo {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 0;
  border: 3px solid var(--ink);
  background: var(--pink-soft);
  overflow: hidden;
  cursor: zoom-in;
}
.polaroid-photo { position: relative; }
/* Absolutely positioned so a tall photo can't stretch the square frame */
.polaroid-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.polaroid figcaption { font: 400 22px/1.3 var(--f-hand); padding: 10px 4px 2px; min-height: 2.6em; }
.scrap-count { margin: 12px 0 0; font: 9px var(--f-pixel); color: var(--purple); }

.placeholder { display: grid; place-items: center; gap: 10px; color: var(--ink); font: 600 15px var(--f-round); }

/* ---------- Critters (Animal Crossing) ---------- */
.grass {
  background-color: #8fd16a;
  background-image:
    radial-gradient(ellipse 7px 4px at 20% 30%, #a8e384 98%, transparent),
    radial-gradient(ellipse 6px 4px at 70% 70%, #79bf55 98%, transparent),
    radial-gradient(ellipse 5px 3px at 45% 85%, #a8e384 98%, transparent);
  background-size: 64px 64px, 48px 48px, 80px 80px;
}
.critters {
  border-radius: 30px;
  padding: 26px 20px 24px;
  border: 5px solid #fff;
  box-shadow: 0 0 0 5px var(--green-dark), 0 10px 0 5px rgba(43, 26, 82, .2);
}
.leaf-title { text-align: center; margin: 0 0 6px; }
.leaf-title span {
  display: inline-block;
  background: var(--cream);
  padding: 8px 30px;
  border-radius: 999px;
  font: 700 28px var(--f-round);
  color: #6b4a1f;
  box-shadow: 0 5px 0 #d9c38a;
}
.critter-group {
  margin: 20px 0 10px;
  font: 700 20px var(--f-round);
  color: #fff;
  text-shadow: 0 2px 0 var(--green-dark), 2px 0 0 var(--green-dark), -2px 0 0 var(--green-dark), 0 -2px 0 var(--green-dark);
}
/* Up to 4 cards per row; rows with fewer cards sit in the middle */
.critter-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.critter-cards > .critter { flex: 0 1 calc((100% - 3 * 16px) / 4); min-width: 200px; }
.critter {
  background: var(--cream);
  border-radius: 24px;
  border: 3px dashed #e0c98e;
  padding: 16px 14px 14px;
  text-align: center;
  box-shadow: 0 5px 0 rgba(63, 143, 46, .5);
  transition: transform .15s;
}
.critter:hover { transform: translateY(-4px) rotate(-1deg); }
.critter-photo {
  width: 110px;
  height: 110px;
  margin: 0 auto 10px;
  border-radius: 50%;
  border: 4px solid #fff;
  box-shadow: 0 0 0 3px #e0c98e;
  background: #dff3ff;
  overflow: hidden;
  display: grid;
  place-items: center;
  font-size: 44px;
}
.critter-photo img { width: 100%; height: 100%; object-fit: cover; }
.critter-name {
  display: inline-block;
  background: var(--orange);
  color: #fff;
  font: 700 16px var(--f-round);
  border-radius: 999px;
  padding: 2px 14px;
  box-shadow: 0 3px 0 #c9630c;
}
.critter-kind { margin: 8px 0 2px; font: 600 12px var(--f-round); color: #9a7a3a; text-transform: uppercase; letter-spacing: 1px; }
.critter-fact { margin: 0; font: 400 18px/1.25 var(--f-hand); }

/* Critter of the Month: a holo trading card (main.js → buildCritters).
   The little one takes over the critter's usual spot; the big one pops out when clicked. */
.tcard {
  position: relative;
  display: block;
  width: 100%;
  padding: 8px 10px 10px;
  border-radius: 14px;
  border: 7px solid var(--yellow);
  background: linear-gradient(160deg, #fff6d6, #ffe3a3);
  box-shadow: 0 0 0 3px #c99a10, 0 8px 0 rgba(43, 26, 82, .25);
  text-align: left;
  color: var(--ink);
  font: inherit;
  /* Tilts toward the pointer (main.js → holo() sets the variables) */
  transform: perspective(800px) rotateY(var(--rx, 0deg)) rotateX(var(--ry, 0deg));
}
/* Holo foil over the whole card: a rainbow sheen with pixel sparkles, and a glare that follows
   the pointer. Hidden (--holo: 0) until the card is touched. Look borrowed from simeydotme's pokemon-cards-css. */
.tcard-shine, .tcard-glare {
  position: absolute;
  inset: -7px;
  z-index: 4;
  border-radius: 14px;
  pointer-events: none;
  opacity: var(--holo, 0);
}
.tcard-shine {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' shape-rendering='crispEdges' fill='white'%3E%3Cpath d='M8 4h2v2h2v2h-2v2H8V8H6V6h2z'/%3E%3Cpath d='M31 25h2v3h3v2h-3v3h-2v-3h-3v-2h3z'/%3E%3Cpath d='M22 12h1v1h-1zM39 7h1v1h-1zM14 35h1v1h-1z'/%3E%3C/svg%3E"),
    repeating-linear-gradient(110deg, #ff8cb0 0%, #ffd23f 5%, #9af07f 10%, #6fe3ff 15%, #b99cff 20%, #ff9ce0 25%, #ff8cb0 30%);
  background-size: 44px 44px, 400% 400%;
  background-position: calc(var(--bx, 50%) * -1.5) calc(var(--by, 50%) * -1.5), var(--bx, 50%) var(--by, 50%);
  mix-blend-mode: soft-light;
}
.tcard-glare {
  background: radial-gradient(farthest-corner circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .85) 6%, rgba(255, 255, 255, .35) 30%, rgba(43, 26, 82, .3) 95%);
  mix-blend-mode: overlay;
}
.tcard.is-memorial {
  border-color: transparent;
  background:
    linear-gradient(160deg, #fdf6ff, #e5e9ff) padding-box,
    linear-gradient(135deg, #ff8c8c, #ffd23f, #7cc85a, #37c6e6, #a98fe6, #ff8cc6) border-box;
  box-shadow: 0 0 0 3px #a98fe6, 0 8px 0 rgba(43, 26, 82, .25);
}
.tcard-banner {
  display: block;
  margin: -2px 0 6px;
  text-align: center;
  font: 8px/1.5 var(--f-pixel);
  color: #b45309;
}
.is-memorial .tcard-banner { color: var(--purple); }
.tcard-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.tcard-name { font: 700 22px var(--f-round); }
.tcard-hp { font: 700 20px var(--f-round); color: #e0457b; white-space: nowrap; }
.tcard-hp small { font: 9px var(--f-pixel); margin-right: 3px; }
.tcard-photo {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 4 / 3;
  padding: 0;
  border: 4px solid #c99a10;
  background: #dff3ff;
  overflow: hidden;
  font: inherit;
}
.is-memorial .tcard-photo { border-color: #a98fe6; }
/* Pinned to the frame so a photo's focus (object-position) picks the crop */
.tcard-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
/* Holo foil: a rainbow shine that slides across the photo */
.tcard-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 140, 198, .35) 40%, rgba(255, 255, 255, .55) 47%, rgba(55, 198, 230, .35) 54%, transparent 64%);
  background-size: 250% 100%;
  mix-blend-mode: screen;
  animation: holo 4s linear infinite;
  pointer-events: none;
}
@keyframes holo { from { background-position: 100% 0; } to { background-position: -150% 0; } }
/* While the card is being tilted the photo turns full holo-rare: rainbow foil bars that follow the pointer */
.is-holo .tcard-photo::after {
  animation: none;
  background:
    repeating-linear-gradient(0deg, #ff8cb0 0%, #ffd23f 6%, #9af07f 12%, #6fe3ff 18%, #b99cff 24%, #ff8cb0 30%),
    repeating-linear-gradient(130deg, #1b1340 0%, #8fa6c0 3.5%, #c8e4ec 4.5%, #8fa6c0 5.5%, #1b1340 10%, #1b1340 12%);
  background-size: 400% 400%, 300% 300%;
  background-position: 0 var(--by, 50%), var(--bx, 50%) var(--by, 50%);
  background-blend-mode: hard-light;
  mix-blend-mode: color-dodge;
  filter: brightness(calc(.3 + var(--hyp, 0) * .2)) contrast(1.6) saturate(1.2);
  opacity: var(--holo, 0);
}
.tcard-ribbon {
  position: absolute;
  z-index: 2;
  right: -34px;
  top: 14px;
  transform: rotate(35deg);
  background: var(--purple);
  color: #fff;
  font: 7px var(--f-pixel);
  padding: 4px 34px;
}
.tcard-type {
  display: block;
  margin: 6px auto 8px;
  padding: 2px 8px;
  width: fit-content;
  background: #fff;
  border: 2px solid #c99a10;
  font: italic 11px var(--f-body);
  text-align: center;
}

/* The little card in the critter's spot: the whole card is one button */
.critter.critter-cotm { background: none; border: 0; box-shadow: none; padding: 0; }
.critter.critter-cotm:hover { transform: none; }
.tcard-mini { cursor: pointer; rotate: -2deg; transition: rotate .2s, scale .2s; }
.tcard-mini:hover, .tcard-mini:focus-visible { rotate: 0deg; scale: 1.04; }
.tcard-mini:focus-visible { outline: 3px dashed var(--pink); outline-offset: 4px; }
.tcard-mini .tcard-name { font-size: 18px; }
.tcard-mini .tcard-hp { font-size: 16px; }
.tcard-mini-moves { display: block; }
.tcard-mini-moves span { display: block; padding: 3px 0; border-bottom: 2px dotted rgba(201, 154, 16, .5); font: 700 13px var(--f-round); }
.tcard-tap { display: block; margin-top: 7px; text-align: center; font: 7px var(--f-pixel); color: #b45309; animation: tcard-blink 1.2s steps(2) infinite; }
@keyframes tcard-blink { 50% { opacity: .35; } }
.critter-cotm .critter-pets { margin-top: 10px; }

/* The big card */
.ccard-wrap { position: relative; width: min(380px, 100%); max-height: 100%; overflow: auto; padding: 14px 8px 12px; }
.ccard-wrap .lightbox-close { top: 0; right: 0; z-index: 3; }
/* Shrinks a hair as it tilts so the near corner doesn't poke past the pop-up and flash a scrollbar */
.tcard-big {
  animation: tcard-pop .35s ease-out;
  transform: perspective(1000px) rotateY(var(--rx, 0deg)) rotateX(var(--ry, 0deg)) scale(calc(1 - var(--hyp, 0) * .06));
}
@keyframes tcard-pop { from { scale: .6; rotate: -6deg; opacity: 0; } }
.tcard-big .tcard-photo { cursor: pointer; }
.tcard-moves { list-style: none; margin: 0 0 8px; padding: 0; }
.tcard-move {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0 8px;
  width: 100%;
  padding: 6px 6px;
  border: 0;
  border-bottom: 2px dotted rgba(201, 154, 16, .5);
  background: none;
  color: inherit;
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.tcard-move:hover, .tcard-move:focus-visible { background: rgba(255, 255, 255, .6); }
.tcard-move b { font: 700 15px var(--f-round); }
.tcard-move b::before { content: "▶ "; color: #e0457b; font-size: 11px; }
.tcard-dmg { font: 700 17px var(--f-round); color: #e0457b; }
.tcard-move-text { grid-column: 1 / -1; font-size: 11.5px; line-height: 1.35; }
.tcard-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; margin: 0 0 8px; }
.tcard-stats div { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.tcard-stats dt { font: 600 12px var(--f-round); }
.tcard-stats dd { margin: 0; display: flex; gap: 2px; }
.tcard-stats i { width: 7px; height: 9px; background: #fff; border: 1px solid #c99a10; }
.tcard-stats i.on { background: var(--orange); border-color: #c9630c; }
.is-memorial .tcard-stats i.on { background: var(--lav-dark); border-color: var(--purple); }
.tcard-foot { display: grid; grid-template-columns: 1fr auto; gap: 1px 8px; font-size: 10px; line-height: 1.4; }
.tcard-rarity { color: #c99a10; letter-spacing: 1px; }
.tcard-num { text-align: right; font: 7px var(--f-pixel); }
.tcard-hint { margin: 8px 0 0; text-align: center; font: 400 15px/1.3 var(--f-hand); color: #6b4a1f; }

/* "📥 Save this card (PDF)": only on the real critter of the month (main.js → saveCard) */
.tcard-save { margin: 16px 0 0; text-align: center; }
.tcard-save-btn {
  padding: 9px 16px;
  border: 4px solid var(--ink);
  border-radius: 16px;
  background: #ffb53d;
  color: var(--ink);
  font: 400 19px/1 var(--f-logo);
  box-shadow: 4px 5px 0 var(--ink);
  transform: rotate(-2deg);
  transition: transform .15s;
  cursor: pointer;
}
.tcard-save-btn:hover, .tcard-save-btn:focus-visible { transform: rotate(0) scale(1.05); }
.tcard-save small { display: block; margin-top: 10px; font: 7px/1.6 var(--f-pixel); color: #fff; }

/* Printing with body.print-card shows only the card, one page, colors on, nothing moving */
@media print {
  body.print-card { background: #fff; }
  body.print-card > :not(#critterCardBox) { display: none !important; }
  body.print-card .ccard-box { position: static; display: block; padding: 0; background: none; }
  body.print-card .ccard-wrap { width: 105mm; max-height: none; margin: 0 auto; padding: 3mm 0 0; overflow: visible; }
  body.print-card .ccard-wrap .lightbox-close,
  body.print-card .tcard-save,
  body.print-card .tcard-hint,
  body.print-card .tcard-say,
  body.print-card .tcard-fx,
  body.print-card .tcard-shine,
  body.print-card .tcard-glare,
  body.print-card .tcard-photo::after { display: none; }
  body.print-card .tcard { transform: none; box-shadow: 0 0 0 3px #c99a10; break-inside: avoid; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body.print-card .tcard.is-memorial { box-shadow: 0 0 0 3px #a98fe6; }
  body.print-card .tcard *, body.print-card .tcard { animation: none !important; transition: none !important; }
}

/* "Riot used BLIND CHARGE!": a Pokémon-style text box across the top of the photo */
.tcard-say {
  position: absolute;
  z-index: 3;
  left: 6px;
  right: 6px;
  top: 6px;
  padding: 5px 8px;
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 4px;
  font: 8px/1.5 var(--f-pixel);
  color: var(--ink);
  text-align: left;
  opacity: 0;
}
.tcard-say.is-on { animation: tcard-say 2.4s steps(1) forwards; }
@keyframes tcard-say { 0% { opacity: 1; } 99% { opacity: 1; } 100% { opacity: 0; } }

/* Their pixel sprite stands in the corner of the photo and acts out the moves */
.tcard-actor { display: block; width: 100%; height: 100%; }
.tcard-sprite {
  position: absolute;
  z-index: 2;
  right: 8%;
  bottom: 6%;
  line-height: 0;
  transform-origin: 50% 100%;
  filter: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(0 3px 0 rgba(43, 26, 82, .35));
  animation: sprite-idle 1s steps(2) infinite;
}
@keyframes sprite-idle { 50% { transform: translateY(-4px); } }
.tcard-sprite.do-charge { animation: mv-charge 1.1s ease-in-out; }
@keyframes mv-charge {
  0% { transform: none; }
  15% { transform: translateX(12%) scaleX(.9); }
  50% { transform: translateX(-330%) translateY(-8%); }
  58% { transform: translateX(-310%) rotate(12deg); }
  66% { transform: translateX(-330%) rotate(-10deg); }
  100% { transform: none; }
}
.tcard-sprite.do-flip { animation: mv-flip 1.1s ease-in-out; }
@keyframes mv-flip {
  0% { transform: none; }
  30% { transform: translateY(-45%) rotate(-20deg); }
  55% { transform: translateY(-55%) scaleX(-1) rotate(20deg); }
  80% { transform: translateY(-10%) scaleX(-1); }
  100% { transform: none; }
}
.tcard-sprite.do-stomp { animation: mv-stomp 1s steps(2); }
@keyframes mv-stomp {
  0%, 100% { transform: none; }
  25%, 75% { transform: translateY(-35%) scale(1.1); }
  50% { transform: scale(1.25, .8); }
}
.tcard-sprite.do-glare { animation: mv-glare 1.3s ease-in-out; }
@keyframes mv-glare {
  0% { transform: none; }
  30%, 75% { transform: translate(-80%, -30%) scale(1.9); }
  42% { transform: translate(-84%, -30%) scale(1.9); }
  54% { transform: translate(-76%, -30%) scale(1.9); }
  100% { transform: none; }
}
.tcard-sprite.do-hug { animation: mv-hug 1.2s ease-in-out; }
@keyframes mv-hug {
  0%, 100% { transform: none; }
  25% { transform: scale(1.35, .8); }
  50% { transform: scale(.85, 1.25); }
  75% { transform: scale(1.3, .82); }
}
.tcard-sprite.do-hide { animation: mv-hide 1.6s ease-in-out; }
@keyframes mv-hide {
  0%, 100% { opacity: 1; transform: none; }
  35%, 65% { opacity: 0; transform: scale(.3); }
}
.tcard-sprite.do-spin { animation: mv-spin 1.1s ease-in-out; }
@keyframes mv-spin {
  0% { transform: none; }
  50% { transform: translateY(-30%) rotate(360deg); }
  100% { transform: rotate(720deg); }
}
.tcard-sprite.do-chomp { animation: mv-chomp 1s steps(2); }
@keyframes mv-chomp {
  0%, 100% { transform: none; }
  25%, 75% { transform: translateX(-90%) scale(1.3); }
  50% { transform: translateX(-60%) scale(1.15); }
}
.tcard-sprite.do-loaf { animation: mv-loaf 1.6s ease-in-out; }
@keyframes mv-loaf {
  0%, 100% { transform: none; }
  40%, 70% { transform: scale(1.3, .6); }
}
/* The little emoji that fly out during a move */
.tcard-fx { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.tcard-fx span { position: absolute; font-size: 24px; opacity: 0; animation: fx-pop 1.2s ease-out forwards; }
.tcard-fx span img.px-emoji { width: 24px !important; height: 24px !important; }
@keyframes fx-pop {
  0% { opacity: 0; transform: translateY(10px) scale(.4); }
  25% { opacity: 1; transform: translateY(0) scale(1.2); }
  100% { opacity: 0; transform: translateY(-40px) scale(1); }
}
.fx-charge span { animation-name: fx-dash; }
@keyframes fx-dash {
  0% { opacity: 0; transform: translateX(30px); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translateX(-70px); }
}
.fx-spin span { animation-name: fx-orbit; }
@keyframes fx-orbit {
  0% { opacity: 0; transform: rotate(0) translateX(10px) scale(.5); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: rotate(360deg) translateX(40px) scale(1.1); }
}

/* ---------- Garden Almanac (growing tips) ---------- */
.growing {
  background:
    repeating-linear-gradient(transparent 0 27px, rgba(124, 200, 90, .18) 27px 28px),
    var(--cream);
  border-radius: 30px;
  padding: 26px 20px 20px;
  border: 5px solid #fff;
  box-shadow: 0 0 0 5px var(--green-dark), 0 10px 0 5px rgba(43, 26, 82, .2);
  text-align: center;
}
.growing-intro { margin: 2px 0 14px; font: 400 21px var(--f-hand); color: #6b4a1f; }
.area-toggle { display: inline-flex; gap: 6px; padding: 5px; border-radius: 999px; background: #e9dcb8; margin-bottom: 14px; }
.area-toggle button,
.month-tab {
  font: 700 14px var(--f-round);
  border: 3px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: #6b4a1f;
  padding: 5px 14px;
  cursor: pointer;
}
.area-toggle button[aria-pressed="true"] { background: #fff; border-color: var(--green-dark); color: var(--green-dark); box-shadow: 0 3px 0 var(--green-dark); }
.month-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-bottom: 16px; }
.month-tab { background: #fff; border-color: #e0c98e; padding: 4px 10px; min-width: 52px; position: relative; }
.month-tab:hover { border-color: var(--green); }
.month-tab.is-now::after { content: "★"; position: absolute; top: -10px; right: -4px; color: var(--orange); font-size: 14px; }
.month-tab[aria-pressed="true"] { background: var(--green); border-color: var(--green-dark); color: #fff; box-shadow: 0 3px 0 var(--green-dark); }

.month-card {
  background: #fff;
  border: 3px dashed #e0c98e;
  border-radius: 24px;
  padding: 16px 16px 12px;
  text-align: left;
}
.month-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.month-head h3 { margin: 0; font: 400 34px/1 var(--f-logo); color: var(--green-dark); }
.now-badge { font: 700 12px var(--f-round); background: var(--orange); color: #fff; border-radius: 999px; padding: 2px 10px; vertical-align: middle; }
.season-badge { font: 700 14px var(--f-round); border-radius: 999px; padding: 4px 12px; border: 2px solid; }
.season-badge.cool { background: #ffe8cc; color: #9a4a00; border-color: #f0a35a; }
.season-badge.warm { background: #fff6b0; color: #6b4a00; border-color: var(--yellow); }
.month-where { margin: 4px 0 12px; font: 600 13px var(--f-round); color: #9a7a3a; }

.packets { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }

/* Drop-down per group (Vegetables / Fruit / Flowers) */
.crop-group {
  margin-top: 10px;
  border-radius: 18px;
  border: 3px solid #e0c98e;
  background: var(--cream);
}
.crop-group > summary,
.crop-group.is-empty {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  padding: 10px 14px;
  list-style: none;
}
.crop-group > summary { cursor: pointer; border-radius: 15px; }
.crop-group > summary::-webkit-details-marker { display: none; }
.crop-group > summary::after {
  content: "▼";
  margin-left: auto;
  color: var(--green-dark);
  font-size: 13px;
  transition: transform .2s;
}
.crop-group[open] > summary::after { transform: rotate(180deg); }
.crop-group > summary:hover { background: #fff3cf; }
.crop-group[open] > summary { border-bottom: 3px dashed #e0c98e; border-radius: 15px 15px 0 0; }
.crop-group > .packets { padding: 12px; }
.crop-group > .packet-legend { padding: 0 14px 12px; margin: 0; }
.cg-title { font: 700 18px var(--f-round); color: var(--ink); }
.cg-preview { display: inline-flex; gap: 2px; font-size: 16px; }
.cg-count {
  font: 700 12px var(--f-round);
  background: var(--green);
  color: #fff;
  border-radius: 999px;
  padding: 2px 10px;
}
.crop-group-fruit { border-color: #f5b3c8; }
.crop-group-fruit .cg-count { background: #e0245e; }
.crop-group-flower { border-color: #d6c2f5; }
.crop-group-flower .cg-count { background: var(--purple); }
.crop-group.is-empty { opacity: .65; }
.crop-group.is-empty .cg-count { background: #b9a77a; }

.cheat-group { margin-top: 10px; border-top: 2px dashed #e0c98e; padding-top: 8px; }
.cheat-group > summary { cursor: pointer; font: 700 15px var(--f-round); color: var(--ink); }
.packet {
  position: relative;
  border-radius: 10px 10px 16px 16px;
  padding: 18px 12px 12px;
  border: 2px solid rgba(0, 0, 0, .12);
  box-shadow: 0 4px 0 rgba(0, 0, 0, .12);
}
.packet::before {
  /* the crimped top of a seed packet */
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 8px;
  background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .12) 0 4px, transparent 4px 8px);
  border-radius: 8px 8px 0 0;
}
.packet-sow { background: #f3e2bd; }
.packet-tray { background: #dff3d2; }
.packet-plant { background: #ffe0ef; }
.packet h4 { margin: 0; font: 700 18px var(--f-round); color: var(--ink); }
.packet-note { margin: 0 0 8px; font: 400 17px/1.2 var(--f-hand); color: #6b4a1f; }
.packet-empty { margin: 0; font: 400 17px/1.25 var(--f-hand); color: #9a7a3a; }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.chips li {
  background: #fff;
  border: 2px solid rgba(0, 0, 0, .1);
  border-radius: 999px;
  padding: 3px 10px 3px 6px;
  font: 600 13px/1.3 var(--f-round);
}
.chips em { font-style: normal; font-weight: 400; color: #9a7a3a; font-size: 12px; }
.chip-emoji { margin-right: 4px; }
/* Hand-drawn vegetable icons (js/veg-icons.js), sized like an emoji */
.veg-icon { display: inline-block; width: 1.2em; height: 1.2em; vertical-align: -0.25em; }
.chip-alt { font-weight: 400; }
.packet-legend { margin: 10px 0 0; font: 400 16px var(--f-hand); color: #6b4a1f; }

.cheat { margin-top: 16px; text-align: left; background: #fff; border-radius: 18px; border: 3px solid #e0c98e; padding: 10px 14px; }
.cheat summary { cursor: pointer; font: 700 16px var(--f-round); color: var(--green-dark); }
.cheat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-top: 10px; }
.cheat-col h4 { margin: 0; font: 700 15px var(--f-round); }
.cheat-col p { margin: 2px 0 6px; font: 400 16px/1.2 var(--f-hand); color: #6b4a1f; }
.cheat-col ul { margin: 0; padding: 0; list-style: none; font: 600 13px/1.6 var(--f-round); }
.growing-source { margin: 14px 0 0; font-size: 11px; color: #6b4a1f; }
.growing-source a { color: var(--green-dark); font-weight: bold; }

@media (max-width: 820px) {
  .packets { grid-template-columns: 1fr; }
  .cheat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .cheat-grid { grid-template-columns: 1fr; }
  .month-head h3 { font-size: 28px; }
}

/* ---------- About letter ---------- */
.about { display: grid; gap: 22px; justify-items: center; }
.letter {
  position: relative;
  width: min(640px, 100%);
  background:
    repeating-linear-gradient(transparent 0 31px, #f5c6dd 31px 33px),
    #fffaf0;
  background-position: 0 14px;
  border-radius: 14px;
  padding: 28px 34px 26px;
  border: 4px solid #fff;
  box-shadow: 0 0 0 4px var(--pink), 6px 10px 0 4px rgba(43, 26, 82, .2);
  font: 400 21px/32px var(--f-hand);
  transform: rotate(.6deg);
}
.letter p { margin: 0 0 0; }
.letter-body p + p { margin-top: 0; }
.letter-to { color: var(--purple); }
.letter-from { text-align: right; color: var(--purple); margin-top: 6px; }
.stamp {
  float: right;
  margin: 0 0 8px 14px;
  padding: 8px;
  background: var(--yellow);
  outline: 3px dashed #fff;
  outline-offset: -6px;
  transform: rotate(8deg);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
}
.letter-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; font-family: var(--f-round); font-size: 15px; }
.letter-links a {
  background: var(--purple);
  color: #fff;
  text-decoration: none;
  padding: 2px 14px;
  border-radius: 999px;
  line-height: 28px;
}
.letter-links a:hover { background: var(--pink); }

.badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.badge {
  width: 88px;
  height: 31px;
  display: grid;
  place-items: center;
  text-align: center;
  font: 7px/1.3 var(--f-pixel);
  border: 2px outset #ddd;
  padding: 0 3px;
}
.badge-a { background: linear-gradient(#ff9ecf, #ff5fae); color: #fff; }
.badge-b { background: #fff6b0; color: #6b4a00; }
.badge-c { background: #000; color: #7dff7d; }
.badge-d { background: linear-gradient(#bdf0a0, #5cb83c); color: #fff; text-shadow: 1px 1px 0 #1f4d15; }
.badge-e { background: linear-gradient(#d9c9ff, #8a3fd1); color: #fff; }
a.badge { text-decoration: none; }
a.badge:hover { border-style: inset; }
/* Two-part badges: a little block on the left, words on the right */
.badge-split { grid-template-columns: 26px 1fr; padding: 0; gap: 0; }
.badge-split > b { align-self: stretch; display: grid; place-items: center; font-weight: normal; border-right: 2px solid rgba(0, 0, 0, .35); }
.badge-split > span { padding: 0 3px; }
.badge-split img.px-emoji { width: 16px !important; height: 16px !important; }
.badge-f { background: #fff; color: #222; }
.badge-f > b { background: #f7df1e; color: #222; font-size: 9px; }
.badge-g { background: linear-gradient(#aee4ff, #37a0e6); color: #fff; text-shadow: 1px 1px 0 #135b8c; }
.badge-h { background: #4a321c; color: #ffd08a; }
.badge-h > b { background: #6b4a2b; }
.badge-i { background: repeating-linear-gradient(45deg, #ffd6ec 0 6px, #ffb0d9 6px 12px); color: #c2185b; }
.badge-j { background: #000080; color: #fff; font-size: 6.5px; text-shadow: 1px 1px 0 #ff00ff; }
.badge-k { background: linear-gradient(#e7f7d4, #a6d987); color: #1f4d15; }
.badge-k > b { background: #3f8f2e; }
.badge-l { background: linear-gradient(#ffe7a3, #ffb84d); color: #6b3a00; }
.badge-new { display: inline-block; background: #e0252f; color: #fff; padding: 1px 2px; animation: badge-blink 1s steps(2) infinite; }
@keyframes badge-blink { 50% { opacity: 0; } }
.badge-m { background: #1c1920; color: var(--ng-orange); border-color: #444; }

/* ---------- Meadow footer ---------- */
.meadow {
  position: relative;
  z-index: 1;
  min-height: 230px;
  margin-top: 30px;
  padding: 26px 16px 18px;
  text-align: center;
  border-top: 8px solid #6fb84c;
  overflow: hidden;
  cursor: crosshair;
}
.meadow::before {
  /* scalloped grass edge */
  content: "";
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  height: 16px;
  background: radial-gradient(circle at 12px 0, transparent 11px, #6fb84c 12px) 0 0 / 24px 16px repeat-x;
  transform: scaleY(-1);
}
.meadow-hint { margin: 0; font: 600 14px var(--f-round); color: #fff; text-shadow: 0 2px 0 var(--green-dark); }
.flowers { position: absolute; inset: 0; pointer-events: none; }
.flowers .px { position: absolute; filter: drop-shadow(1px 0 0 var(--ink)) drop-shadow(-1px 0 0 var(--ink)) drop-shadow(0 1px 0 var(--ink)) drop-shadow(0 -1px 0 var(--ink)); animation: pop .35s cubic-bezier(.3, 1.8, .6, 1) both; transform-origin: bottom center; }
@keyframes pop { from { transform: translate(-50%, -100%) scale(0); } to { transform: translate(-50%, -100%) scale(1); } }

.rail { position: relative; margin: 92px -16px 0; }
.walker {
  position: absolute;
  bottom: 18px;
  left: -60px;
  animation: walk 26s linear infinite;
  filter: drop-shadow(2px 0 0 var(--ink)) drop-shadow(-2px 0 0 var(--ink)) drop-shadow(0 2px 0 var(--ink)) drop-shadow(0 -2px 0 var(--ink));
}
.walker-bob { display: block; animation: bob .5s steps(2) infinite; }
/* The chicken sprite faces left, so flip it while it walks right */
@keyframes walk {
  0%   { left: -60px; transform: scaleX(-1); }
  48%  { left: calc(100% + 10px); transform: scaleX(-1); }
  50%  { left: calc(100% + 10px); transform: scaleX(1); }
  98%  { left: -60px; transform: scaleX(1); }
  100% { left: -60px; transform: scaleX(-1); }
}

.tracks {
  position: relative;
  height: 28px;
  background: repeating-linear-gradient(90deg,
    #ff6b6b 0 12px, transparent 12px 26px,
    #ffa94d 26px 38px, transparent 38px 52px,
    #ffd43b 52px 64px, transparent 64px 78px,
    #69db7c 78px 90px, transparent 90px 104px,
    #4dabf7 104px 116px, transparent 116px 130px,
    #b197fc 130px 142px, transparent 142px 156px);
}
.tracks::before,
.tracks::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 4px;
  background: #fff;
  box-shadow: 0 2px 0 #b9b3c9;
}
.tracks::before { top: 4px; }
.tracks::after { bottom: 4px; }

.construction {
  display: inline-block;
  margin-top: 18px;
  padding: 4px;
  background: repeating-linear-gradient(-45deg, var(--yellow) 0 10px, #222 10px 20px);
  border: 3px solid #222;
}
.construction span { display: block; padding: 6px 12px; background: var(--yellow); color: #222; font: 9px var(--f-pixel); }
.copyright { margin: 14px 0 0; font: 600 13px var(--f-round); color: #fff; text-shadow: 0 2px 0 var(--green-dark); }

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(43, 26, 82, .7);
}
.lightbox[hidden] { display: none; }
.lightbox-card {
  position: relative;
  width: min(640px, 100%);
  max-height: 100%;
  overflow: auto;
  background: #fff;
  border-radius: 24px;
  padding: 20px;
  text-align: center;
  box-shadow: 0 0 0 6px var(--lav-mid);
}
.lightbox-card h2 { margin: 0 0 12px; font: 400 32px var(--f-logo); color: var(--lav-dark); }
.lightbox-photo {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  background: var(--pink-soft);
  border: 4px solid var(--ink);
  border-radius: 14px;
  overflow: hidden;
}
.lightbox-photo img { width: 100%; height: 100%; object-fit: contain; background: #000; }
.lightbox-caption { font: 400 22px var(--f-hand); margin: 10px 0; }
.lightbox-nav { display: flex; align-items: center; justify-content: space-between; font: 9px var(--f-pixel); }
.lightbox-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 3px solid var(--ink);
  background: var(--pink);
  color: #fff;
  font-weight: bold;
  cursor: pointer;
}

/* ---------- Arcade pop-up (Newgrounds player) ---------- */
body.arcade-open { overflow: hidden; }
.arcade { background: rgba(20, 16, 28, .85); }
.arcade-card {
  width: min(760px, 100%, calc((100vh - 120px) * 4 / 3));
  min-width: min(300px, 100%);
  background: var(--ng-panel);
  border: 3px solid #000;
  border-radius: 14px;
  box-shadow: 0 0 0 4px var(--ng-orange), 0 12px 0 rgba(0, 0, 0, .35);
  overflow: hidden;
}
.arcade-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 8px 14px;
  background: linear-gradient(#ffb84d, var(--ng-orange));
  border-bottom: 3px solid #000;
}
.arcade-bar h2 { flex: 1; min-width: 0; margin: 0; font: 400 24px var(--f-logo); color: #fff; text-shadow: 2px 2px 0 var(--ink); text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arcade-pop { flex: none; font: 700 12px var(--f-round); color: var(--ink); }
.arcade-close {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid var(--ink);
  background: var(--pink);
  color: #fff;
  font-weight: bold;
  cursor: pointer;
}
.arcade-screen { aspect-ratio: 4 / 3; background: #000; }
.arcade-screen iframe { display: block; width: 100%; height: 100%; border: 0; }
.arcade-tip { margin: 0; padding: 6px 10px; font: 600 12px var(--f-round); color: #bbb; text-align: center; }
.tag-arcade { background: var(--ng-orange); color: #2b1300; }

/* ---------- 13+ check for PG-13 games ---------- */
.tag-rated { background: #e8352e; color: #fff; }
.age-card { width: min(440px, 100%); }
.age-badge {
  display: inline-block;
  margin-bottom: 6px;
  padding: 6px 14px;
  border: 4px solid var(--ink);
  border-radius: 12px;
  background: #e8352e;
  color: #fff;
  font: 14px var(--f-pixel);
  transform: rotate(-4deg);
  box-shadow: 3px 3px 0 var(--ink);
}
.age-text { margin: 0 0 14px; font: 600 16px/1.45 var(--f-round); }
.age-check {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border: 3px dashed var(--lav-mid);
  border-radius: 14px;
  background: var(--pink-soft);
  font: 700 18px var(--f-round);
  cursor: pointer;
}
.age-check input { width: 24px; height: 24px; margin: 0; accent-color: var(--purple); cursor: pointer; }
.age-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 16px 0 8px; }
.age-buttons button {
  padding: 10px 18px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  font: 700 16px var(--f-round);
  box-shadow: 0 4px 0 var(--ink);
  cursor: pointer;
}
.age-go { background: var(--yellow); color: var(--ink); }
.age-go:disabled { background: #ddd; color: #888; box-shadow: 0 4px 0 #999; border-color: #999; cursor: not-allowed; }
.age-back { background: #fff; color: var(--ink); }
.age-note { margin: 6px 0 0; font: 400 18px var(--f-hand); color: var(--lav-dark); }
/* Step 2: The Garden Worm Dilemma */
.age-quiz-intro {
  display: inline-block;
  margin: 0 32px 8px; /* clear of the ✕ button */
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--yellow);
  color: var(--ink);
  font: 700 14px var(--f-round);
  transform: rotate(-1.5deg);
}
.age-quiz-title { font-size: 26px !important; }
.age-quiz-text { font-size: 14px; text-align: left; }
.age-quiz-text b { color: var(--purple); }
.age-bed { margin: 0 0 8px; }
.age-bed svg { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.age-dim { font: 9px var(--f-pixel); fill: var(--ink); }
.age-legend { margin: 6px 0 0; font: 600 12px var(--f-round); color: #6b5a8e; }
.age-swatch { display: inline-block; width: 14px; height: 10px; vertical-align: -1px; background: #ffd6ec; border: 2px dashed #8a3fd1; }
.age-quiz-ask { margin: 0 0 10px; font: 700 15px/1.4 var(--f-round); text-align: left; }
.age-answer { display: flex; align-items: center; justify-content: center; gap: 10px; font: 700 16px var(--f-round); }
.age-answer input {
  width: 96px;
  padding: 8px 10px;
  border: 3px solid var(--ink);
  border-radius: 12px;
  font: 14px var(--f-pixel);
  text-align: center;
  background: var(--cream);
}
.age-feedback { min-height: 1.4em; margin: 8px 0 0; font: 700 13px/1.4 var(--f-round); color: #c42a24; }

/* ---------- Mail picker ---------- */
.mail-card {
  width: min(440px, 100%);
  background: repeating-linear-gradient(transparent 0 31px, #f5c6dd 31px 33px), #fffaf0;
  box-shadow: 0 0 0 6px var(--pink);
}
.mail-card h2 { font: 400 32px var(--f-logo); color: var(--purple); margin: 4px 0 2px; }
.mail-stamp {
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  font-size: 30px;
  background: var(--yellow);
  outline: 3px dashed #fff;
  outline-offset: -6px;
  transform: rotate(-6deg);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
}
.mail-sub { margin: 0 0 16px; font: 400 20px/1.3 var(--f-hand); }
.mail-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mail-option {
  display: block;
  padding: 12px 8px;
  border: 3px solid var(--ink);
  border-radius: 14px;
  box-shadow: 0 4px 0 var(--ink);
  color: #fff;
  font: 700 17px var(--f-round);
  text-decoration: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .3);
  cursor: pointer;
}
.mail-option:hover { transform: translateY(2px); box-shadow: 0 2px 0 var(--ink); }
.mail-gmail { background: #ea4335; }
.mail-outlook { background: #0f6cbd; }
.mail-yahoo { background: #6001d2; }
.mail-app { background: var(--green-dark); }
.mail-copy { grid-column: 1 / -1; background: var(--yellow); color: var(--ink); text-shadow: none; }
.mail-copy-letter { background: var(--pink); }
.mail-status { min-height: 1.4em; margin: 12px 0 0; font: 400 20px var(--f-hand); color: var(--purple); }

/* ---------- Cursor sparkles ---------- */
.sparkle {
  position: fixed;
  z-index: 100;
  pointer-events: none;
  font-size: 14px;
  animation: sparkle .8s ease-out forwards;
}
@keyframes sparkle {
  to { transform: translate(var(--dx), 26px) scale(.2) rotate(120deg); opacity: 0; }
}

/* ---------- Small screens ---------- */
@media (max-width: 820px) {
  .welcome { grid-template-columns: 1fr; }
  .stickers { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .sticker { font-size: 18px; }
  .side-right { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; }
  .history { width: 200px; }
  .featured { grid-template-columns: 1fr; }
  .portal-body { grid-template-columns: 1fr; }
  .game-list { grid-template-columns: 1fr; }
  .battle-on { display: none; }
  .mascot { top: 6px; left: 0; transform: scale(.7); }
}
@media (max-width: 520px) {
  .logo h1 { letter-spacing: 0; }
  .logo .ltr { -webkit-text-stroke-width: 3px; text-shadow: 2px 2px 0 #fff, 4px 5px 0 var(--ink); }
  .mascot { display: none; }
  .sticker { font-size: 16px; padding: 8px 10px; gap: 6px; }
  .dialog { padding: 20px 22px 18px; font-size: 15px; }
  /* Arrows go under the polaroid so the photo can use the full width */
  .scrap-stage { display: grid; grid-template-columns: auto auto; justify-content: center; gap: 14px 40px; }
  .polaroid { grid-column: 1 / -1; grid-row: 1; justify-self: center; width: min(380px, calc(100vw - 110px)); }
  .arrow { min-width: 48px; font-size: 7px; }
  .letter { padding: 24px 20px; font-size: 19px; }
  .stamp { display: none; }
  .tabs a { font-size: 14px; padding: 8px 10px 6px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .ticker-track { flex-wrap: wrap; }
}

/* ---------- Chapter signposts between groups of sections (pastel pink wooden sign) ---------- */
main > .chapter-sign { margin-top: 44px; scroll-margin-top: 16px; text-align: center; }
.chapter-board {
  position: relative;
  display: inline-block;
  margin: 0;
  padding: 8px 26px 7px;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .22) 0 2px, transparent 2px 9px),
    linear-gradient(#ffd3e5, #f4a9c8);
  border: 3px solid #c9628f;
  border-radius: 12px;
  box-shadow: 0 5px 0 #c9628f, 0 8px 12px rgba(43, 26, 82, .2);
  color: #fff;
  font: 400 clamp(24px, 5vw, 32px)/1.15 var(--f-logo);
  letter-spacing: 1px;
  -webkit-text-stroke: 1px #a8436f;
  paint-order: stroke fill;
  text-shadow: 0 2px 0 #a8436f;
  transform: rotate(-1.5deg);
}
/* Two little nails */
.chapter-board::before, .chapter-board::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -3px;
  border-radius: 50%;
  background: #c9628f;
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .45);
}
.chapter-board::before { left: 9px; }
.chapter-board::after { right: 9px; }

/* 88×31 badges at the very bottom, in the meadow footer above the copyright line */
.footer-badges { position: relative; margin-top: 16px; }

/* Date under a scrapbook photo's caption (albums with dates: true in main.js → ALBUMS) */
.polaroid-date { display: block; margin-top: 2px; font: 9px var(--f-pixel); color: var(--purple); letter-spacing: .5px; }