/* ============================================================
   4. Home Screen — the library entrance
   ============================================================ */

.home {
  position: relative;              /* anchor point for the free-floating hanging mirror */
  max-width: min(920px, 98vw);     /* tight fit: 6 books + "+N more" + new/archive + large globe, minimal empty gap */
  margin: 0 auto;
  padding: 12px 0 40px;
}

/* Wallpaper patterns — applied to #app so the whole library sits over
   a textured wall. Pattern color follows --wallpaper-ink (set via
   Settings > Make it yours > Pattern color). */
#app {
  --wallpaper-ink: rgba(58, 36, 50, 0.14);
}
#app[data-wallpaper="stripes"] {
  background-image: repeating-linear-gradient(
    90deg,
    transparent 0, transparent 22px,
    var(--wallpaper-ink) 22px, var(--wallpaper-ink) 24px
  );
}
#app[data-wallpaper="grid"] {
  background-image:
    repeating-linear-gradient(0deg,   transparent 0 19px, var(--wallpaper-ink) 19px 20px),
    repeating-linear-gradient(90deg, transparent 0 19px, var(--wallpaper-ink) 19px 20px);
}
#app[data-wallpaper="wood"] {
  background-image:
    repeating-linear-gradient(0deg,
      transparent 0 14px,
      var(--wallpaper-ink) 14px 15px,
      transparent 15px 29px,
      var(--wallpaper-ink) 29px 30px
    );
}
#app[data-wallpaper="dots"] {
  background-image:
    radial-gradient(circle at 12px 12px, var(--wallpaper-ink) 1.5px, transparent 2px);
  background-size: 24px 24px;
}
#app[data-wallpaper="diamonds"] {
  background-image:
    linear-gradient( 45deg, var(--wallpaper-ink) 25%, transparent 25%),
    linear-gradient(-45deg, var(--wallpaper-ink) 25%, transparent 25%),
    linear-gradient( 45deg, transparent 75%, var(--wallpaper-ink) 75%),
    linear-gradient(-45deg, transparent 75%, var(--wallpaper-ink) 75%);
  background-size: 26px 26px;
  background-position: 0 0, 0 13px, 13px -13px, -13px 0;
}


/* --- Wall header: title + decorations (seasonal icon, picture frame) --- */
.library-header {
  display: grid;
  grid-template-columns: auto auto 1fr auto auto;
  align-items: center;
  gap: 16px;
  padding: 8px 20px 24px;
}

/* Stardew-Valley / Harvest-Moon inspired wooden clock. Sits just left
   of the title; time updates every 30s via startClock(). */
.stardew-clock {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.library-header .stardew-clock {
  margin-left: 16px;                       /* extra breathing room from the season picker */
  margin-right: -10px;                     /* nudge closer to the title */
}
.stardew-clock-frame {
  background: var(--clock-frame-bg, linear-gradient(to bottom, #c59d6a 0%, #a97f4b 55%, #8b6437 100%));
  border: 3px solid var(--ink);
  border-radius: 6px;
  padding: 4px;
  display: flex;
  flex-direction: column;
  align-items: stretch;                  /* day plate + face share width */
  box-shadow:
    3px 3px 0 var(--ink),
    inset 0 0 0 2px rgba(0,0,0,0.18),
    inset 2px 2px 0 rgba(255,255,255,0.25);
}
.stardew-clock-day {
  text-align: center;
  font-family: 'Pixelify Sans', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: #3a2b1a;                          /* dark wood-ink on the plate */
  background: #e6c28a;                     /* fallback if no weekday match */
  border: 2px solid var(--ink);
  border-radius: 3px;
  padding: 2px 0;
  margin-bottom: 3px;
  text-shadow: 0 1px 0 rgba(255,255,255,0.35);
}
/* Dusty-pastel background per weekday (user's color-of-the-week).
   0=Sun, 1=Mon, ... 6=Sat — matches Date.getDay(). */
.stardew-clock-day[data-weekday="1"] { background: #d99898; } /* Mon — dusty red */
.stardew-clock-day[data-weekday="2"] { background: #e1a97c; } /* Tue — dusty orange */
.stardew-clock-day[data-weekday="3"] { background: #e0cc86; } /* Wed — dusty yellow */
.stardew-clock-day[data-weekday="4"] { background: #a3bd8f; } /* Thu — dusty green */
.stardew-clock-day[data-weekday="5"] { background: #8ca8c2; } /* Fri — dusty blue */
.stardew-clock-day[data-weekday="6"] { background: #b59cc6; } /* Sat — dusty purple */
.stardew-clock-day[data-weekday="0"] { background: #e8b5c0; } /* Sun — dusty pink */
.stardew-clock-face {
  background: #1b1a18;
  border: 2px solid var(--ink);
  border-radius: 3px;
  padding: 4px 12px;
  text-align: center;                    /* center the time text inside */
  box-shadow: inset 0 0 6px rgba(0,0,0,0.6);
}
.stardew-clock-time {
  font-family: 'Pixelify Sans', monospace;
  font-size: 1.1rem;
  color: #f4e6c8;
  letter-spacing: 0.06em;
  text-shadow: 0 0 4px rgba(244,230,200,0.35);
  white-space: nowrap;
}

/* Optional weather widget. Sits between the title and the settings
   frame. Click to edit today's entry. Empty state has a subtle border. */
.weather-widget {
  font-family: 'Pixelify Sans', sans-serif;
  font-size: 0.9rem;
  background: var(--bg-page);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 4px;
  padding: 6px 10px;
  box-shadow: 2px 2px 0 var(--ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  line-height: 1;
}
.library-header .weather-widget {
  margin-left: -10px;                    /* nudge closer to the title on the home header */
}
.weather-widget:hover { background: var(--highlight); }
.weather-widget--empty { opacity: 0.75; font-style: italic; }
.weather-widget-icon {
  font-size: 1.1rem;
  line-height: 1;
}
.weather-widget-temps {
  letter-spacing: 0.03em;
}

/* The picture frame doubles as a Settings door. We keep it styled like
   a decoration — transparent background, no chrome — so it still reads
   as a picture on the wall, but it's now a real <button>. */
button.wall-decor {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  color: inherit;
  font: inherit;
  line-height: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
button.wall-decor:hover { transform: translateY(-1px); }
button.wall-decor:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 3px; }

/* Pure-CSS picture frame with a tiny sunrise — replaces the 🖼️ emoji.
   Wooden outer frame, cream mat, peach-to-gold sky gradient, a green
   horizon, and a half-sun rising above it. */
.picture-frame-icon {
  --frame-wood: #caa06e;
  position: relative;
  display: inline-block;
  width: 44px;
  height: 34px;
  background: var(--frame-wood);
  border: 2px solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  overflow: hidden;
  font-size: 0;
  filter: drop-shadow(1px 2px 0 rgba(0,0,0,0.15));
}
.picture-frame-icon::before {
  /* Sunrise sky: warm peach at top fading to gold at the horizon */
  content: '';
  position: absolute;
  inset: 4px;
  background: linear-gradient(to bottom, #ffc998 0%, #ffaa72 55%, #ffd66e 100%);
  border: 1px solid var(--ink);
  z-index: 0;
}
.picture-frame-icon::after {
  /* Lake surface across the bottom of the canvas. A soft gold shimmer
     at the top edge reads as the sunrise reflecting on the water. */
  content: '';
  position: absolute;
  bottom: 5px;
  left: 5px;
  right: 5px;
  height: 9px;
  background:
    radial-gradient(ellipse 60% 80% at 50% 0%, rgba(255,214,110,0.7) 0%, transparent 72%),
    linear-gradient(#6d9bc7 0%, #9bc0db 100%);
  border-top: 1.5px solid var(--ink);
  z-index: 1;
}
.frame-sun {
  /* Half-circle sun poking up above the waterline (dawn default) */
  position: absolute;
  bottom: 11px;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 6px;
  background: #ffde8a;
  border: 1.5px solid var(--ink);
  border-bottom: none;
  border-radius: 50% 50% 0 0;
  z-index: 2;
}

/* Tiny stars that only show at night. */
.frame-star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: #f7e7b4;
  border-radius: 50%;
  opacity: 0;
  z-index: 2;
}
.frame-star--1 { top: 7px;  left: 10px; }
.frame-star--2 { top: 10px; left: 26px; }
.frame-star--3 { top: 14px; left: 18px; }

/* --- Picture-frame sky per time-of-day phase ---------------------- */

/* Day: blue sky, yellow sun high up */
.picture-frame-icon[data-time-phase="day"]::before {
  background: linear-gradient(to bottom, #a0c6e0 0%, #c6deed 60%, #dde8f2 100%);
}
.picture-frame-icon[data-time-phase="day"] .frame-sun {
  width: 10px;
  height: 10px;
  bottom: 18px;
  background: #ffd95a;
  border-bottom: 1.5px solid var(--ink);
  border-radius: 50%;
}

/* Dusk: warm magenta-to-coral sky; sun setting at the waterline */
.picture-frame-icon[data-time-phase="dusk"]::before {
  background: linear-gradient(to bottom, #c96e8e 0%, #e79274 55%, #f1c473 100%);
}
.picture-frame-icon[data-time-phase="dusk"]::after {
  background:
    radial-gradient(ellipse 60% 80% at 50% 0%, rgba(241,114,80,0.55) 0%, transparent 72%),
    linear-gradient(#4d5a82 0%, #7280a4 100%);
}
.picture-frame-icon[data-time-phase="dusk"] .frame-sun {
  background: #e77b5a;
}

/* Night: deep navy sky, moon + stars */
.picture-frame-icon[data-time-phase="night"]::before {
  background: linear-gradient(to bottom, #1f2a48 0%, #2e3d65 70%, #3b5180 100%);
}
.picture-frame-icon[data-time-phase="night"]::after {
  background:
    radial-gradient(ellipse 60% 80% at 50% 0%, rgba(247,231,180,0.22) 0%, transparent 72%),
    linear-gradient(#2b3a5e 0%, #3e527a 100%);
}
.picture-frame-icon[data-time-phase="night"] .frame-sun { display: none; }
.picture-frame-icon[data-time-phase="night"] .frame-star { opacity: 1; }

/* Wrapper that lets the season-corner button sit between two small
   prev/next arrows. The arrows cycle which season's decor + label
   are shown in the corner, so the user can preview each season's
   design from the home page. */
.season-corner-wrap {
  display: flex;
  align-items: flex-end;
  gap: 6px;
}
.season-corner-arrow {
  width: 24px;
  height: 30px;
  background: var(--bg-page);
  border: 2px solid var(--ink);
  border-radius: 4px;
  box-shadow: 2px 2px 0 var(--ink);
  cursor: pointer;
  font-family: 'Pixelify Sans', sans-serif;
  font-size: 1rem;
  line-height: 1;
  color: var(--ink);
  padding: 0;
  margin-bottom: 2px;  /* align with the cream nameplate, not the decor */
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.season-corner-arrow:hover { background: var(--highlight); }
.season-corner-arrow:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 var(--ink);
}

/* ==========================================================
   Seasonal corner decorations — pure-CSS objects that sit
   above the "Spring 2026" cream nameplate in the upper-left.
   ========================================================== */

.season-decor {
  position: relative;
  width: 46px;
  height: 46px;
  filter: drop-shadow(1px 2px 0 rgba(0,0,0,0.15));
}

/* --- Spring: daisy ----------------------------------------------- */
.decor-flower {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}
.decor-flower .flower-bloom {
  position: relative;
  width: 36px;
  height: 36px;
  margin-bottom: -3px;
  z-index: 3;
}
.decor-flower .petal {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 16px;
  margin-left: -5px;
  margin-top: -18px;                      /* push each petal out from center */
  background: #e49bb3;                   /* soft rose petals */
  border: 1.5px solid var(--ink);
  border-radius: 60% 60% 40% 40% / 70% 70% 30% 30%;
  transform-origin: 50% 100%;
}
.decor-flower .petal--p0 { transform: rotate(0deg); }
.decor-flower .petal--p1 { transform: rotate(60deg); }
.decor-flower .petal--p2 { transform: rotate(120deg); }
.decor-flower .petal--p3 { transform: rotate(180deg); }
.decor-flower .petal--p4 { transform: rotate(240deg); }
.decor-flower .petal--p5 { transform: rotate(300deg); }
.decor-flower .flower-center {
  position: absolute;
  top: 50%; left: 50%;
  width: 12px; height: 12px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 35% 30%, #fde58a 0%, #f3c949 60%, #c99a2a 100%);
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  box-shadow: inset -1px -1px 0 rgba(0,0,0,0.15);
  z-index: 4;
}
.decor-flower .flower-stem {
  position: relative;
  width: 3px;
  height: 10px;
  background: #7fa764;
  border-left: 1.5px solid var(--ink);
  border-right: 1.5px solid var(--ink);
  z-index: 1;
}
.decor-flower .flower-leaf {
  position: absolute;
  top: 2px;
  left: 3px;
  width: 8px;
  height: 5px;
  background: #8cb870;
  border: 1.5px solid var(--ink);
  border-radius: 70% 20% 70% 20%;
  transform: rotate(-25deg);
}
/* --- Summer: classic sun ---------------------------------------- */
.decor-sun {
  display: flex;
  align-items: center;
  justify-content: center;
}
.decor-sun .sun-core {
  position: relative;
  width: 22px;
  height: 22px;
  background: radial-gradient(circle at 35% 30%, #fff1b4 0%, #f3c949 60%, #d49a2f 100%);
  border: 2px solid var(--ink);
  border-radius: 50%;
  box-shadow: inset -2px -2px 0 rgba(0,0,0,0.12);
  z-index: 2;
}
.decor-sun .sun-rays {
  position: absolute;
  top: 50%; left: 50%;
  width: 1px; height: 1px;
  z-index: 1;
}
.decor-sun .sun-ray {
  position: absolute;
  top: 0; left: 0;
  width: 4px;
  height: 8px;
  margin-left: -2px;
  margin-top: -20px;                     /* push ray tip outward */
  background: #f3c949;
  border: 1.5px solid var(--ink);
  border-radius: 2px;
  transform-origin: 50% 20px;
  transform: rotate(var(--angle, 0deg));
}

/* --- Autumn: pumpkin -------------------------------------------- */
.decor-pumpkin {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}
.decor-pumpkin .pumpkin-stem {
  width: 6px;
  height: 8px;
  background: #5e7a3a;
  border: 1.5px solid var(--ink);
  border-radius: 2px 2px 1px 1px;
  margin-bottom: -2px;
  z-index: 2;
  box-shadow: inset -1px 0 0 rgba(0,0,0,0.15);
}
.decor-pumpkin .pumpkin-body {
  position: relative;
  width: 36px;
  height: 28px;
  background: radial-gradient(ellipse at 40% 35%, #f0a85e 0%, #d68340 70%, #a85c24 100%);
  border: 2px solid var(--ink);
  border-radius: 50% 50% 48% 48% / 60% 60% 50% 50%;
  box-shadow: inset -2px -1px 0 rgba(0,0,0,0.15);
}
.decor-pumpkin .pumpkin-ridge {
  position: absolute;
  top: 2px;
  bottom: 2px;
  width: 2px;
  background: rgba(0,0,0,0.25);
  border-radius: 2px;
}
.decor-pumpkin .pumpkin-ridge--l { left: 11px; }
.decor-pumpkin .pumpkin-ridge--r { right: 11px; }

/* --- Winter: mug with steam ------------------------------------- */
.decor-mug {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}
.decor-mug .mug-steam {
  position: relative;
  width: 20px;
  height: 14px;
  margin-bottom: 1px;
}
.decor-mug .steam-line {
  position: absolute;
  top: 0;
  width: 2px;
  height: 12px;
  background: rgba(255,255,255,0.85);
  border: 1.5px solid var(--ink);
  border-radius: 3px;
}
.decor-mug .steam-line--l { left: 4px;  transform: rotate(-8deg); }
.decor-mug .steam-line--r { right: 4px; transform: rotate(8deg); }
.decor-mug .mug-body {
  position: relative;
  width: 26px;
  height: 22px;
  background: linear-gradient(to bottom, #e6dff1 0%, #c7bad9 70%, #a48fc7 100%);
  border: 2px solid var(--ink);
  border-radius: 3px 3px 6px 6px;
  box-shadow: inset -2px 0 0 rgba(0,0,0,0.12);
}
.decor-mug .mug-rim {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: #3a2d5a;
  border-bottom: 1.5px solid var(--ink);
}
.decor-mug .mug-handle {
  position: absolute;
  top: 5px;
  right: -8px;
  width: 10px;
  height: 12px;
  border: 2px solid var(--ink);
  border-left: none;
  border-radius: 0 10px 10px 0;
  background: transparent;
}

/* Cream nameplate under the picture frame — reads as a museum-plaque
   style label. Uses --bg-page so it matches every other cream label
   in the library (shelf labels, book spines, etc). */
.picture-frame-label {
  background: var(--bg-page);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 4px;
  padding: 1px 8px;
  font-family: 'Pixelify Sans', sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: lowercase;
  box-shadow: 2px 2px 0 var(--ink);
}

.library-title {
  text-align: center;
}

.library-title h1 {
  font-size: 2rem;
  margin: 0;
  color: var(--title-color, var(--ink));
}

.library-title .tagline {
  color: var(--tagline-color, var(--ink-soft));
  margin: 4px 0 0;
  font-size: 0.95rem;
  font-style: italic;
}

/* Optional opaque banner behind the title + tagline. Shape is chosen
   from Settings (titleBannerShape); color comes from Make it yours
   (titleOvalColor — name kept for save compatibility). */
.library-title--banner {
  background: var(--title-oval-bg, #faf5e7);
  border: 2px solid var(--ink);
  padding: 14px 34px;
  box-shadow: 2px 2px 0 var(--ink);
}
.library-title--oval    { border-radius: 50% / 65%; }
.library-title--rounded { border-radius: 14px; }
.library-title--pill    { border-radius: 999px; }

.wall-decor {
  font-size: 1.8rem;
  filter: drop-shadow(1px 2px 0 rgba(0,0,0,0.15));
}


/* --- Shelves: three wooden shelves stacked ----------------------- */
.shelves {
  display: flex;
  flex-direction: column;
  gap: 6px;                    /* tight, equal spacing between every shelf */
  padding: 0 8px;
}
/* Home-only gap tuning: more air between Seasons (1st) and Life Goals
   (2nd), less between Life Goals (2nd) and Study Room (3rd). Single-shelf
   views only render one .shelf so these selectors don't match there. */
.shelves > .shelf:nth-child(2) {
  margin-top: 24px;
}
.shelves > .shelf:nth-child(3) {
  margin-top: -6px;
}

.shelf {
  position: relative;
  padding: 0 12px;
}

.shelf-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  min-height: 92px;
  padding: 0 24px 0 40px;  /* leave room for left decoration */
}

/* Label on the left of each shelf — like a small wooden sign. */
.shelf-label {
  position: relative;
  font-family: 'Pixelify Sans', sans-serif;
  font-size: 1.22rem;
  color: var(--ink);
  background: var(--bg-page);
  border: 2px solid var(--ink);
  border-radius: 4px;
  padding: 6px 12px;
  box-shadow: 2px 2px 0 var(--ink);
  align-self: center;
  flex-shrink: 0;
  min-width: 127px;
  text-align: center;
  cursor: pointer;
}
.shelf-label:hover { background: var(--highlight); }

/* Variant shown inside a zoomed shelf room — the door has already been
   opened, so the corner is now a "go back" affordance instead of naming
   the shelf. Slightly smaller + italic so it reads as an action label. */
.shelf-label--return {
  font-size: 0.95rem;
  font-style: italic;
  letter-spacing: 0.3px;
}

/* Small year badge below "Seasons" — reflects which year the shelf
   is currently showing. Updates when the user taps the arrows. */
.shelf-label-year {
  display: block;
  font-family: 'Pixelify Sans', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
  opacity: 0.75;
  margin-top: 2px;
}

/* Prev / next year arrows flanking the Seasons shelf books. Styled as
   simple pixel buttons, ink border, small cream background — same
   visual family as other app buttons. */
.year-arrow {
  align-self: center;
  width: 30px;
  height: 30px;
  background: var(--bg-page);
  border: 2px solid var(--ink);
  border-radius: 4px;
  box-shadow: 2px 2px 0 var(--ink);
  cursor: pointer;
  font-family: 'Pixelify Sans', sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1;
  padding: 0;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.year-arrow:hover { background: var(--highlight); }
.year-arrow:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 var(--ink);
}

/* "⤺ today" button that replaces the candle when the user has
   navigated off the current year. Tap to snap back. */
.year-today {
  align-self: center;
  margin-left: auto;
  padding: 6px 12px;
  background: var(--bg-page);
  border: 2px solid var(--ink);
  border-radius: 4px;
  box-shadow: 2px 2px 0 var(--ink);
  cursor: pointer;
  font-family: 'Pixelify Sans', sans-serif;
  font-size: 0.82rem;
  color: var(--ink);
}
.year-today:hover { background: var(--highlight); }
.year-today:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 var(--ink);
}

/* Label + door stacked in a column, so the door sits directly under
   the white shelf-label header and rests on the plank. */
.shelf-corner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 26px;
  flex-shrink: 0;
  padding-right: 12px;
}

/* Fairy door standing on the shelf plank, centered under the label.
   Shading: top arch highlight + darker base strip + right-side inset
   shadow, so the door reads as rounded rather than flat. An inset
   ::before paints the recessed inner panel. */
.shelf-door {
  position: relative;
  z-index: 3;
  width: 43px;
  height: 53px;
  /* zoom scales margins, so pre-divide to keep the physical overlap at 2px. */
  margin-bottom: calc(-2px / 1.15);
  zoom: 1.15;                        /* 15% up */
  background: var(--door, var(--accent));
  /* Same trick as the books — three-sided ink border + a thin 1px line
     at the bottom seam where the door meets the shelf plank. */
  border: 2px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  border-radius: 22px 22px 0 0;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.32),   /* curved top highlight */
    inset 0 -4px 0 rgba(0,0,0,0.22),        /* base shadow strip */
    inset -4px 0 0 rgba(0,0,0,0.18);        /* right-side depth */
  cursor: pointer;
  flex-shrink: 0;
  overflow: hidden;                          /* clip plank lines to the arch */
}
.shelf-door::before {
  /* Vertical plank lines: two 1px grout seams dividing the door face
     into three equal planks. The arched top naturally clips them
     (via overflow: hidden on .shelf-door). */
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right,
      transparent calc(33.33% - 0.5px),
      rgba(0,0,0,0.35) calc(33.33% - 0.5px),
      rgba(0,0,0,0.35) calc(33.33% + 0.5px),
      transparent calc(33.33% + 0.5px)),
    linear-gradient(to right,
      transparent calc(66.66% - 0.5px),
      rgba(0,0,0,0.35) calc(66.66% - 0.5px),
      rgba(0,0,0,0.35) calc(66.66% + 0.5px),
      transparent calc(66.66% + 0.5px));
}

/* Two small dark hinges on the left side of the door frame. */
.shelf-door-hinge {
  position: absolute;
  left: 2px;
  width: 5px;
  height: 4px;
  background: rgba(0,0,0,0.55);
  border-right: 1px solid var(--ink);
  border-radius: 1px;
  z-index: 2;
  pointer-events: none;
}
.shelf-door-hinge--top    { top: 12px; }
.shelf-door-hinge--bottom { bottom: 10px; }
.shelf-door::after {
  /* Pixel doorknob */
  content: '';
  position: absolute;
  right: 6px;
  bottom: 22px;
  width: 4px;
  height: 4px;
  background: var(--ink);
  border-radius: 1px;
}
.shelf-door:hover { background: var(--highlight); }

/* The wooden plank the books sit on. */
.shelf-plank {
  position: relative;
  z-index: 1;                        /* sits under the books */
  height: 16px;
  background:
    linear-gradient(to bottom, var(--shelf-wood) 0%, var(--shelf-wood) 55%, var(--shelf-wood-dark) 100%);
  border: 2px solid var(--ink);
  border-radius: 3px;
  margin-top: 0;
  box-shadow:
    inset 0 2px 0 rgba(0,0,0,0.28),   /* contact shadow where books meet the shelf */
    0 4px 0 rgba(0,0,0,0.18);
}

/* A little plant tucked on the left side of each shelf. */
.shelf-decor {
  position: absolute;
  bottom: 14px;
  font-size: 1.4rem;
  filter: drop-shadow(1px 1px 0 rgba(0,0,0,0.2));
  pointer-events: none;
}
.shelf-decor.left { left: 4px; }


/* --- Books: spine-facing with a slight tilt ---------------------- */
.books {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 6px;
  flex: 1;
}

.book {
  --spine: #b38a5f;                 /* overridden inline per book */
  position: relative;
  z-index: 2;                       /* sit on top of the shelf plank */
  width: 42px;
  height: 150px;
  margin-bottom: -2px;              /* base overlaps the plank a hair */
  background: var(--spine);
  /* Ink border on all sides. The bottom border is kept thin so it reads
     as a subtle seam where the book meets the shelf plank — enough to
     separate them visually without looking like a full fourth wall. */
  border: 2px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  border-radius: 2px 2px 0 0;
  /* Shadow casts only to the right. A downward shadow would fall past
     the shelf and look like the book is levitating. The cream inset at
     the top is the paper-edge of the pages peeking above the cover. */
  box-shadow:
    inset -4px 0 0 rgba(0,0,0,0.12),      /* dim right edge for depth */
    inset 3px 0 0 rgba(255,255,255,0.18), /* highlight on the spine   */
    2px 0 0 var(--ink);                   /* outer pixel shadow, right only */
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Page-edge detail at the top of every book spine — a solid cream
   strip with a 1px solid black line where the pages meet the cover. */
.book::before {
  content: '';
  position: absolute;
  top: 2px;                              /* below the top ink border */
  left: 2px;
  right: 2px;
  height: 6px;
  background: var(--bg-page);
  border-bottom: 1px solid #000;
  pointer-events: none;
  z-index: 1;
}

/* Slight height variation so books feel handmade, not machine-stamped. */
.book:nth-child(2n)   { height: 160px; }
.book:nth-child(3n)   { height: 142px; }
.book:nth-child(4n+1) { height: 168px; }

/* A couple of books lean slightly against their neighbours — real shelves
   are never perfectly upright. Pivot from the bottom corner so the base
   stays planted on the plank. */
.book:nth-child(5n)   { transform: rotate(-1.2deg); transform-origin: bottom right; }
.book:nth-child(7n+3) { transform: rotate(1deg);    transform-origin: bottom left;  }

/* Inventory stands upright. Selector uses .book.inventory-book to
   match the nth-child rules' specificity so they don't re-tilt it. */
.book.inventory-book {
  transform: none;
}

/* Per-book height overrides for life-goal spines. The nth-child
   pattern above produces nice variation, but we pin specific heights
   here when we want two particular books to read a certain way on
   the shelf. */
.book[data-book="lifegoal:homeCare"]        { height: 150px; }
.book[data-book="lifegoal:creative"]        { height: 198px; }
.book[data-book="lifegoal:humanConnection"] { height: 168px; }
.book[data-book="lifegoal:nutrition"]       { height: 142px; }

.book:hover {
  transform: translateY(-4px);
  /* On hover the book lifts off the shelf, so a downward shadow now
     makes sense (the gap below is real). Keep the cream page-edge. */
  box-shadow:
    inset -4px 0 0 rgba(0,0,0,0.12),
    inset 3px 0 0 rgba(255,255,255,0.22),
    inset 0 3px 0 var(--bg-page),
    3px 3px 0 var(--ink);
}

.book-label {
  font-family: 'Pixelify Sans', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-align: center;
  line-height: 1.15;
  padding: 8px 0;
  max-height: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 0.03em;
}

/* Small decorative symbol that follows the title text on the spine —
   ♥, ☾, ★, etc. Sits inline at the end of the rotated .book-label so it
   appears right after the title word (visually near the top of the spine,
   since the label reads bottom-to-top). The 180° counter-rotation flips
   directional glyphs (♥, ☾) back to their natural orientation, since the
   parent label is itself rotated 180°. */
.book-decor {
  display: inline-block;
  font-size: 0.9rem;
  opacity: 0.85;
  margin-inline-start: 4px;
  transform: rotate(180deg);
}
.book-decor--large {
  display: block;
  font-size: 1.1rem;
  margin: 0 0 6px;
  opacity: 0.85;
}


/* "+ new" tile for the DIY shelf — dashed, cream, friendly. */
.book.book--add {
  background: var(--bg-page);
  border-style: dashed;
  box-shadow: none;
}
.book.book--add .book-label {
  writing-mode: horizontal-tb;
  transform: none;
  font-size: 0.65rem;
}

/* "Past years" bookmark — a small pile of horizontal books with a
   sepia photo frame resting on top. Sits next to the Seasons pen cup
   on both the home shelf and the Seasons room. The whole object is a
   single click target that opens the past-years archive. */
.past-years-stack {
  position: relative;
  width: 96px;
  height: 62px;
  align-self: flex-end;
  cursor: pointer;
  flex-shrink: 0;
  margin-left: 4px;
}
.past-years-stack:hover .past-years-frame { transform: translate(-50%, -2px); }
.past-years-stack:active .past-years-book { transform: translateY(1px); }

/* Three slim horizontal "books" stacked at the base, each a hair offset
   so the pile reads as handmade. Pastel spines (dusty, to hint age). */
.past-years-book {
  position: absolute;
  left: 4px;
  right: 4px;
  height: 8px;
  border: 2px solid var(--ink);
  border-radius: 2px;
  box-shadow: 2px 2px 0 var(--ink);
}
.past-years-book--1 {
  bottom: 0;
  background: #b79b78;
  transform: translateX(-1px);
}
.past-years-book--2 {
  bottom: 10px;
  background: #c7b38c;
  left: 6px;
  right: 2px;
}
.past-years-book--3 {
  bottom: 20px;
  background: #9e8763;
  left: 2px;
  right: 6px;
}

/* Sepia-toned framed photo resting on top of the pile. Warm brown
   border with a cream/yellowed photo surface and "past years" lettering
   standing in for the image. Centered over the stack. */
.past-years-frame {
  position: absolute;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  width: 84px;
  height: 30px;
  background: #7a5a3a;
  border: 2px solid var(--ink);
  border-radius: 3px;
  box-shadow: 2px 2px 0 var(--ink);
  padding: 3px;
  transition: transform 0.12s ease;
}
.past-years-frame-photo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: linear-gradient(#f5e5c5, #e5cfa3);
  border: 1px solid #5a3e22;
  font-family: 'Pixelify Sans', sans-serif;
  font-size: 0.68rem;
  font-style: italic;
  color: #5a3e22;
  letter-spacing: 0.3px;
}

/* Shown inside a zoomed shelf room when its archive mode is empty
   (e.g. the "past years" view with no retired years yet). */
.shelf-empty-note {
  text-align: center;
  color: var(--ink-soft);
  margin: 40px 0;
}


/* Two compact plan tiles above the shelves, centered side-by-side. */
.plan-tiles {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: nowrap;                /* keep the two tiles side by side */
  margin: 0 auto 14px;
  padding: 0 16px;
}
.todays-page--compact {
  display: block;
  width: fit-content;
  max-width: none;
  margin: 0;
  padding: 4px 9px;                 /* tighter box */
  text-align: center;
  box-shadow: 2px 2px 0 var(--ink);
}
.todays-page--compact .todays-page-date {
  font-size: 0.8rem;                /* bumped font */
  margin: 0 0 1px;
}
.todays-page--compact .todays-page-prompt {
  font-size: 1.05rem;               /* bumped font */
  margin: 0;
}

/* --- Reading desk (journal link only, under shelves) ------------- */
.reading-desk {
  margin-top: 28px;
  padding: 20px 16px 0;
  display: flex;
  justify-content: center;
}

.todays-page {
  width: 100%;
  max-width: 520px;
  background: var(--bg-page);
  border: 2px solid var(--ink);
  border-radius: 6px;
  padding: 22px 28px 26px;
  box-shadow: 4px 5px 0 var(--ink);
  cursor: pointer;
  text-align: center;
  position: relative;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* (center crease removed — clean sticky-note look) */

.todays-page:hover {
  transform: translateY(-2px);
  box-shadow: 4px 7px 0 var(--ink);
}

.todays-page-date {
  font-family: 'Pixelify Sans', sans-serif;
  color: var(--ink-soft);
  margin: 0 0 10px;
  font-size: 0.95rem;
}

.todays-page-prompt {
  font-family: 'Pixelify Sans', sans-serif;
  font-size: 1.4rem;
  color: var(--ink);
  margin: 0 0 14px;
}

.todays-page-hint {
  color: var(--ink-soft);
  font-size: 0.85rem;
  margin: 0;
  font-style: italic;
}


/* ============================================================
   5. Shelf View — zoomed in on one shelf
   ============================================================ */

.shelf-view {
  max-width: 1040px;
  margin: 0 auto;
  padding: 12px 16px 40px;
}
/* Inside a shelf room, hide corner contents by default so duplicated
   door/label renders (from renderDiyShelfAll's per-row corners, or
   renderSeasonsShelfForYear's per-year corners) don't visually stack.
   The one shelf tagged `.has-door` by renderShelfView keeps its corner
   visible — that's the "return to library" door. Tagging happens on the
   first visible variant (desktop or mobile), so the door shows on the
   right one per viewport without the CSS having to know about media. */
.shelf-view .shelves .shelf .shelf-corner > * {
  visibility: hidden;
  pointer-events: none;
}
.shelf-view .shelves .shelf.has-door .shelf-corner > * {
  visibility: visible;
  pointer-events: auto;
}

.back-btn {
  font-family: 'Pixelify Sans', sans-serif;
  font-size: 0.9rem;
  background: var(--bg-page);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 4px;
  padding: 6px 12px;
  box-shadow: 2px 2px 0 var(--ink);
  cursor: pointer;
  margin-bottom: 18px;
}
.back-btn:hover { background: var(--highlight); }

.shelf-view-header {
  text-align: center;
  margin-bottom: 28px;
}
/* Clock inside the shelf-view header — hidden by default; re-enabled
   per-viewport below. On mobile the clock shows only on the home page
   (no clutter in inner rooms or on Today/Day pages). */
.shelf-view-clock { display: none; margin-top: 10px; }
.shelf-view-icon {
  font-size: 2rem;
  display: block;
  margin-bottom: 4px;
}
.shelf-view-header h1 {
  margin: 0;
  font-size: 1.8rem;
  display: inline-block;
  background: var(--highlight);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 3px;
  padding: 6px 18px;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.25);
  letter-spacing: 0.03em;
}
.shelf-view-subtitle {
  color: var(--ink-soft);
  margin: 6px 0 0;
  font-size: 0.95rem;
  font-style: italic;
}

.shelf-view-floor {
  position: relative;
}
.shelf-view-books {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;                            /* matches the home shelf's .books */
  align-items: flex-end;
  justify-content: center;
  padding: 20px 12px 0;
  min-height: 180px;                   /* books are now home-shelf-sized */
}
.shelf-view-plank {
  height: 18px;
  background:
    linear-gradient(to bottom, var(--shelf-wood) 0%, var(--shelf-wood) 55%, var(--shelf-wood-dark) 100%);
  border: 2px solid var(--ink);
  border-radius: 3px;
  box-shadow:
    inset 0 2px 0 rgba(0,0,0,0.28),   /* contact shadow where books meet the shelf */
    0 4px 0 rgba(0,0,0,0.18);
}

/* Larger books used in the shelf view */
.book--large {
  --spine: #e9b0a8;
  width: 80px;
  height: 260px;
  background: var(--spine);
  border: 2px solid var(--ink);
  border-radius: 3px 3px 0 0;
  margin-bottom: -2px;                /* sits on the plank */
  position: relative;
  z-index: 2;
  box-shadow:
    inset -6px 0 0 rgba(0,0,0,0.12),
    inset 5px 0 0 rgba(255,255,255,0.22);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 6px 10px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.book--large:hover {
  transform: translateY(-6px);
  box-shadow:
    inset -6px 0 0 rgba(0,0,0,0.12),
    inset 5px 0 0 rgba(255,255,255,0.3),
    0 6px 0 rgba(0,0,0,0.25);
}

.book-large-spine {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  flex: 1;
  padding: 4px 0;
}
.book-large-title {
  font-family: 'Pixelify Sans', sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 220px;
}
.book-large-sub {
  font-size: 0.7rem;
  color: rgba(0,0,0,0.55);
  font-style: italic;
}
.book-large-marker {
  font-family: 'Pixelify Sans', sans-serif;
  font-size: 0.6rem;
  color: var(--ink);
  background: var(--highlight);
  border: 1px solid var(--ink);
  border-radius: 3px;
  padding: 1px 5px;
  margin-top: 4px;
  writing-mode: horizontal-tb;
}


/* "+ new book" tile, larger version */
.book--add-large {
  background: var(--bg-page);
  border-style: dashed;
  box-shadow: none;
  justify-content: center;
  gap: 8px;
}
.book--add-large:hover {
  background: var(--highlight);
  transform: translateY(-4px);
  box-shadow: 0 4px 0 rgba(0,0,0,0.15);
}
.book-large-plus {
  font-family: 'Pixelify Sans', sans-serif;
  font-size: 2.2rem;
  color: var(--ink);
}
.book-large-addlabel {
  font-family: 'Pixelify Sans', sans-serif;
  font-size: 0.75rem;
  color: var(--ink-soft);
}


/* ==========================================================
   Mobile — phones at ≤480px. Tighten padding, stack headers,
   shrink decor zooms so the library fits a thumb-sized screen
   without losing its "walked into a room" feel.
   ========================================================== */
/* Split-shelf layout: renderers emit both a desktop single-shelf version
   and a mobile multi-shelf version; these classes control which is
   visible. Default is desktop-showing; the media query below flips it. */
.shelf--mobile { display: none; }

/* Season corner is rendered in two DOM slots (library header and the
   plan-tiles row). Desktop shows the header one; mobile hides that and
   shows the one nested between the plan tiles instead. */
.season-corner-wrap--mobile { display: none; }

/* Continuation corner — same footprint as .shelf-corner but visually
   blank so the split shelves line up vertically with the labeled one. */
.shelf-corner--continuation {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  padding-right: 12px;
}

@media (max-width: 480px) {
  /* Show the multi-shelf mobile variant, hide the desktop one. */
  .shelf--desktop { display: none; }
  .shelf--mobile  { display: block; }

  /* Book-spine glyphs (☀ ♥ $ ✦ etc.) clutter the narrow mobile spines;
     the book title alone reads cleanly. */
  .shelves .book .book-decor { display: none; }

  /* Library header is a CSS grid on desktop; on mobile we rearrange it:
       Row 1: title ......................... settings
       Row 2: clock · weather ·····(spacer)····· season
     The 1fr spacer column pushes clock/weather to the left and the
     season picker all the way to the right edge of the row. */
  .library-header {
    grid-template-columns: auto auto 1fr auto;
    grid-template-areas:
      "title   title    title    settings"
      "clock   weather  .        season";
    gap: 8px 8px;
    padding: 8px 0 12px;
    align-items: center;
  }
  .library-title        { grid-area: title; min-width: 0; }
  .library-title h1     { font-size: 1.3rem; }
  .library-title .tagline { font-size: 0.78rem; }
  .picture-frame        { grid-area: settings; justify-self: end; }
  .stardew-clock        { grid-area: clock;   margin: 0; }
  .weather-widget       { grid-area: weather; margin: 0; }
  .season-corner-wrap   { grid-area: season; justify-self: end; gap: 4px; }

  /* Season corner: smaller picture frame + tighter arrows so the whole
     row-2 trio fits on a 375px-wide screen. */
  .season-corner-arrow {
    min-width: 32px;
    min-height: 32px;
    font-size: 1.2rem;
  }
  .wall-decor.season-corner {
    width: 70px;
    height: 70px;
  }
  .season-corner .picture-frame-label { font-size: 0.6rem; }

  /* Plan tiles: on mobile, side-by-side can crowd — allow wrap so they
     stack naturally when a user has very long tile copy. */
  .plan-tiles { flex-wrap: wrap; }

  /* Shelf row: the biggest mobile win — reclaim the side padding. */
  .shelf-row {
    padding: 0 8px !important;
    gap: 4px;
  }
  .shelf-plank { margin: 0 4px; }
  .shelf-corner { min-width: 58px; }

  /* Books in a tidy 4-per-row grid so a shelf reads as "stacked rows of
     books" instead of a crowded single line. Each row wraps on the same
     shelf plank, which reads as multiple mini-shelves. */
  .books {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px 4px;
    justify-items: center;
    align-items: end;
  }
  /* Below-the-shelf row on mobile — holds the "+ new" / archive tiles
     clearly under the shelf plank so they don't crowd the last book. */
  .shelf-below {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 10px 0 18px;
  }
  .shelf-below .shelf-btn-stack {
    flex-direction: row;
    gap: 10px;
    margin: 0;
    align-self: center;
  }

  /* Books: narrow + uniform heights so rows line up cleanly. !important
     is needed to beat the per-book height/transform variations defined
     above (they use higher-specificity selectors than .book). */
  .book,
  .book[data-book="lifegoal:homeCare"],
  .book[data-book="lifegoal:creative"],
  .book[data-book="lifegoal:humanConnection"],
  .book[data-book="lifegoal:nutrition"] {
    width: 32px !important;
    height: 104px !important;
    font-size: 0.64rem;
    transform: none !important;
  }
  .book-label {
    font-size: 0.62rem;
    padding: 6px 0;
    letter-spacing: 0.02em;
  }

  /* Decor objects rendered at 50% of their desktop zoom so they don't
     crowd the shelf on a phone. Mug + globe are hidden entirely
     (home shelf and zoomed Study Room view). */
  .shelf-pencup { zoom: 0.9; }
  /* !important needed because books.css loads after shelves.css and
     redeclares `.shelf-globe { display: flex }` / `.shelf-mug` there. */
  .shelf-globe  { display: none !important; }
  .shelf-mug    { display: none !important; }
  .shelf-plant  { zoom: 1.3; }
  .ideas-jar-icon { zoom: 0.6; }
  .shelf-candle { zoom: 0.6; }
  /* Shelf door stays closer to its default size so it reads clearly as
     "enter this room" on mobile (and so the relabeled "return to
     library" version stays visible inside inner rooms). */
  .shelf-door   { zoom: 0.95; }
  .past-years-stack { zoom: 0.6; }
  .desk-calendar { zoom: 0.75; }

  /* Shelf-corner: reserve enough width on mobile so the door + label
     always render next to the books. Otherwise the flex row can squeeze
     the corner to zero on narrow screens when there are a lot of books. */
  .shelf-corner {
    min-width: 66px;
    padding-right: 6px;
    gap: 10px;
  }
  .shelf-label {
    font-size: 0.8rem;
    white-space: normal;
    line-height: 1.1;
    max-width: 66px;
    text-align: center;
  }

  /* Mirror hides on mobile — the wall is already busy with shelves and
     there's no mug to anchor its "28px NW of mug" position against. */
  .shelf-mirror { display: none; }

  /* Shelf-view (zoomed-in shelf): books fit 4 across comfortably. */
  .shelf-view { padding: 12px 10px; }
  .shelf-view-books { gap: 8px; }
  .book--large {
    width: 68px;
    font-size: 0.82rem;
  }

  /* Ideas jar label chip doesn't crash into neighbors. */
  .shelf--jar .notes-scroll { width: 80px; }
}