@import url("https://fonts.googleapis.com/css2?family=Jua&family=M+PLUS+Rounded+1c:wght@500;700;800;900&family=Nunito:wght@500;600;700;800&display=swap");

:root {
  --blue-border: #91cae1;
  --pink-border: #e9a5c4;
  --lavender-border: #c8b5e8;
  --blue-text: #617699;
  --pink-text: #a76b89;
}

/* =========================================================
   WHOLE PAGE: ONE ENCLOSED BLUE-GINGHAM RECTANGLE
========================================================= */

body.home-page {
  margin: 0 !important;
  padding: 18px 0 40px !important;

  background:
    rgba(255,255,255,.68)
    url("/images/patterns/pink-stars.jpg")
    center top / 480px auto repeat fixed !important;
}

body.home-page .retro-home {
  width: min(1240px, calc(100% - 28px)) !important;
  margin: 0 auto !important;
  padding: 10px !important;

  background:
    rgba(255,255,255,.68)
    url("/images/patterns/blue-pink-gingham.jpg")
    center / 330px auto repeat !important;

  border: 2px solid var(--blue-border) !important;
  border-radius: 5px !important;

  box-shadow:
    0 0 0 4px rgba(255,255,255,.96),
    0 7px 0 rgba(128,191,217,.18) !important;

  box-sizing: border-box !important;
}

/* Tighter, perfectly fitted three-column layout */
body.home-page .retro-grid {
  display: grid !important;
  grid-template-columns: 205px minmax(0, 1fr) 250px !important;
  gap: 8px !important;
  align-items: start !important;
  margin-top: 8px !important;
}

body.home-page .retro-column {
  display: grid !important;
  gap: 8px !important;
  min-width: 0 !important;
}

/* =========================================================
   THINNER BORDERS AND SMALLER CORNERS
========================================================= */

body.home-page .retro-banner,
body.home-page .retro-box,
body.home-page .trip-row,
body.home-page .special-page-card,
body.home-page .food-card,
body.home-page .main-photo-grid figure {
  border-width: 1px !important;
  border-radius: 4px !important;
  outline: none !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

body.home-page .retro-box {
  overflow: hidden !important;
  background: rgba(255,255,255,.88) !important;
  border-color: var(--blue-border) !important;
}

body.home-page .retro-title {
  min-height: 34px !important;
  padding: 7px 8px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  border: 0 !important;
  border-bottom: 1px solid rgba(117,153,181,.34) !important;
  border-radius: 0 !important;

  font-family:
    "M PLUS Rounded 1c",
    "Jua",
    sans-serif !important;

  font-size: .82rem !important;
  font-weight: 800 !important;
  text-align: center !important;
}

/* Keep title areas as gradients */
body.home-page .pink-title {
  background: linear-gradient(180deg, #fff1f7, #f4d7e5) !important;
}

body.home-page .blue-title {
  background: linear-gradient(180deg, #edfaff, #d4edf7) !important;
}

body.home-page .yellow-title {
  background: linear-gradient(180deg, #fffbe3, #f8eeb7) !important;
}

body.home-page .green-title {
  background: linear-gradient(180deg, #effcf4, #d8efdf) !important;
}

body.home-page .lavender-title {
  background: linear-gradient(180deg, #f4efff, #e3d7f6) !important;
}

/* =========================================================
   BANNER
========================================================= */

body.home-page .retro-banner {
  position: relative !important;
  min-height: 240px !important;
  padding: 6px !important;

  background:
    url("/images/patterns/blue-pink-gingham.jpg")
    center / 330px auto repeat !important;

  border-color: var(--blue-border) !important;
}

body.home-page .retro-banner-photo {
  position: absolute !important;
  inset: 6px !important;

  background:
    url("/images/us-banner.jpg?v=1300")
    center center / cover no-repeat !important;

  border: 1px solid var(--pink-border) !important;
  border-radius: 3px !important;
}

body.home-page .retro-banner-title {
  position: absolute !important;
  z-index: 5 !important;
  right: 18px !important;
  bottom: 14px !important;

  margin: 0 !important;

  font-family:
    "M PLUS Rounded 1c",
    sans-serif !important;

  font-weight: 900 !important;
}

/* Old plain counter becomes the heart counter container */
body.home-page .dating-badge {
  position: absolute !important;
  z-index: 20 !important;
  top: 15px !important;
  right: 15px !important;

  min-width: 170px !important;
  padding: 8px 10px !important;

  background:
    rgba(255,255,255,.94)
    url("/images/patterns/pink-gingham.jpg")
    center / 190px auto repeat !important;

  border: 1px solid #dfa0bd !important;
  border-radius: 4px !important;
  box-shadow: 0 3px 0 rgba(195,126,158,.22) !important;

  text-align: center !important;
}

body.home-page .dating-heart-date {
  margin-bottom: 4px;

  color: #9c6982;

  font-family: "Nunito", sans-serif;
  font-size: .58rem;
  font-weight: 800;
}

body.home-page .dating-heart-row {
  display: flex;
  justify-content: center;
  gap: 4px;
}

body.home-page .dating-heart-digit {
  width: 32px;
  height: 29px;

  display: grid;
  place-items: center;

  color: white;
  background: linear-gradient(180deg, #fac5da, #e896ba);

  clip-path: polygon(
    50% 95%,
    9% 58%,
    3% 37%,
    7% 20%,
    20% 8%,
    36% 8%,
    50% 22%,
    64% 8%,
    80% 8%,
    93% 20%,
    97% 37%,
    91% 58%
  );

  font-family: "Nunito", sans-serif;
  font-size: .74rem;
  font-weight: 900;

  filter:
    drop-shadow(0 1px 0 #ffffff)
    drop-shadow(0 2px 0 rgba(185,104,145,.35));
}

body.home-page .dating-heart-caption {
  margin-top: 3px;

  color: #607d99;

  font-family: "Nunito", sans-serif;
  font-size: .58rem;
  font-weight: 800;
}

/* =========================================================
   PATTERNS INSIDE THE ACTIVE PANELS
========================================================= */

body.home-page .profile-content {
  background:
    rgba(255,255,255,.32)
    url("/images/patterns/pink-gingham.jpg")
    center / 250px auto repeat !important;
}

body.home-page .retro-nav {
  background:
    rgba(255,255,255,.27)
    url("/images/patterns/blue-polka.jpg")
    center / 220px auto repeat !important;
}

body.home-page .main-photo-grid {
  padding: 12px !important;

  background:
    rgba(255,255,255,.24)
    url("/images/patterns/pink-sage-classic-plaid.jpg")
    center / 320px auto repeat !important;
}

body.home-page .special-page-grid {
  padding: 10px !important;

  background:
    rgba(255,255,255,.24)
    url("/images/patterns/pastel-rainbow-diamond.jpg")
    center / 330px auto repeat !important;
}

body.home-page .food-grid {
  padding: 10px !important;

  background:
    rgba(255,255,255,.24)
    url("/images/patterns/pink-yellow-gingham.jpg")
    center / 285px auto repeat !important;
}

body.home-page .update-photo-grid {
  padding: 10px !important;

  background:
    rgba(255,255,255,.23)
    url("/images/patterns/pink-sage-lace-plaid.jpg")
    center / 300px auto repeat !important;
}

body.home-page .trip-list {
  padding: 9px !important;
  gap: 7px !important;

  background:
    rgba(255,255,255,.23)
    url("/images/patterns/lavender-yellow-plaid.jpg")
    center / 285px auto repeat !important;
}

/* =========================================================
   TRIP CARDS + LARGER HELLO KITTY ICONS
========================================================= */

body.home-page .trip-row {
  display: grid !important;
  grid-template-columns: 82px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 10px !important;

  min-height: 110px !important;
  padding: 10px !important;

  background: rgba(255,255,255,.80) !important;
  border-color: var(--lavender-border) !important;
}

body.home-page .trip-icon {
  width: 78px !important;
  height: 78px !important;
  min-width: 78px !important;
  min-height: 78px !important;

  display: grid !important;
  place-items: center !important;

  overflow: hidden !important;

  background: rgba(255,255,255,.96) !important;
  border: 1px solid #e4a5c4 !important;
  border-radius: 50% !important;
}

body.home-page .trip-icon img {
  width: 68px !important;
  height: 68px !important;

  display: block !important;

  object-fit: contain !important;
  object-position: center !important;

  border: 0 !important;
  border-radius: 0 !important;
}

body.home-page .trip-info {
  min-width: 0 !important;
  text-align: left !important;
}

body.home-page .trip-info strong {
  display: block !important;
  margin-bottom: 8px !important;

  color: var(--blue-text) !important;

  font-family: "Nunito", sans-serif !important;
  font-size: .78rem !important;
  line-height: 1.2 !important;
}

body.home-page .trip-info span {
  display: inline-block !important;
  min-width: 62px !important;
  padding: 6px 12px !important;

  color: #816da7 !important;
  background: #f5edff !important;

  border: 1px solid #c8b0e7 !important;
  border-radius: 999px !important;

  font-family: "Nunito", sans-serif !important;
  font-size: .76rem !important;
  font-weight: 900 !important;
  text-align: center !important;
}

/* =========================================================
   WORLD CUP NEXT GAMES
========================================================= */

body.home-page .world-cup-panel {
  border-color: #d5bb60 !important;
}

body.home-page .world-cup-panel .retro-title {
  background: linear-gradient(180deg, #fffbe2, #f7e9a7) !important;
  color: #77714f !important;
}

body.home-page .world-cup-content {
  padding: 8px !important;

  background:
    rgba(255,255,255,.25)
    url("/images/patterns/yellow-blue-polka.jpg")
    center / 195px auto repeat !important;
}

body.home-page .world-next-list {
  display: grid;
  gap: 6px;
}

body.home-page .world-next-card {
  padding: 7px;

  background: rgba(255,255,255,.88);
  border: 1px solid #d8c783;
  border-radius: 3px;
}

body.home-page .world-next-teams {
  color: #61738c;

  font-family: "Nunito", sans-serif;
  font-size: .67rem;
  font-weight: 900;
  line-height: 1.25;
}

body.home-page .world-next-time {
  margin-top: 2px;

  color: #987e68;

  font-family: "Nunito", sans-serif;
  font-size: .54rem;
  font-weight: 700;
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 850px) {
  body.home-page .retro-grid {
    grid-template-columns: 190px minmax(0, 1fr) !important;
  }

  body.home-page .retro-right {
    grid-column: 1 / -1 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 620px) {
  body.home-page .retro-grid,
  body.home-page .retro-right {
    grid-template-columns: 1fr !important;
  }

  body.home-page .dating-badge {
    transform: scale(.82);
    transform-origin: top right;
  }
}

/* =========================================================
   NEOCITIES FEEL BOOST
   - blue gingham outside
   - white stars inside
   - slightly more framed / cute
========================================================= */

/* whole page outside background */
body.home-page {
  background:
    rgba(255,255,255,.70)
    url("/images/patterns/blue-pink-gingham.jpg")
    center top / 340px auto repeat fixed !important;
}

/* main site wrapper */
body.home-page .retro-home {
  background:
    rgba(255,255,255,.85)
    url("/images/patterns/blue-pink-gingham.jpg")
    center / 340px auto repeat !important;

  border: 1px solid #8fc7df !important;
  border-radius: 6px !important;
  box-shadow:
    0 0 0 4px rgba(255,255,255,.95),
    0 0 0 5px #b9dff0 !important;
}

/* all inner boxes feel more like "placed on top" of the site bg */
body.home-page .retro-box {
  background:
    rgba(255,255,255,.92)
    url("/images/patterns/pink-stars.jpg")
    center / 300px auto repeat !important;

  border: 1px solid #9ecfe4 !important;
  border-radius: 4px !important;
}

/* keep title bars solid/gradient like old web layouts */
body.home-page .retro-title {
  background-image: none !important;
}

/* trip panel: outside stays lavender title, inside becomes white stars */
body.home-page .trip-panel {
  background:
    rgba(255,255,255,.93)
    url("/images/patterns/pink-stars.jpg")
    center / 280px auto repeat !important;
}

body.home-page .trip-list {
  background:
    rgba(255,255,255,.35)
    url("/images/patterns/pink-stars.jpg")
    center / 260px auto repeat !important;
  padding: 8px !important;
}

/* trip cards: more framed / more "widget" */
body.home-page .trip-row {
  background:
    rgba(255,255,255,.88)
    url("/images/patterns/pink-stars.jpg")
    center / 220px auto repeat !important;

  border: 1px solid #c9b6eb !important;
  border-radius: 4px !important;
  box-shadow: 2px 2px 0 rgba(203,184,235,.35) !important;
}

/* make HK circles a bit more standout */
body.home-page .trip-icon {
  background: rgba(255,255,255,.97) !important;
  border: 1px solid #e6a4c5 !important;
  box-shadow: 2px 2px 0 rgba(230,164,197,.28) !important;
}

/* little pill more retro */
body.home-page .trip-info span {
  background: #f6efff !important;
  border: 1px solid #bda8e3 !important;
  box-shadow: 2px 2px 0 rgba(189,168,227,.22) !important;
}

/* left / center / right panels also use white star inside */
body.home-page .profile-content,
body.home-page .main-photo-grid,
body.home-page .special-page-grid,
body.home-page .food-grid,
body.home-page .update-photo-grid,
body.home-page .world-cup-content,
body.home-page .boba-side-panel,
body.home-page .boba-right-panel {
  background:
    rgba(255,255,255,.35)
    url("/images/patterns/pink-stars.jpg")
    center / 280px auto repeat !important;
}

/* navigation should feel more like cute old-web links */
body.home-page .retro-nav a {
  border: 1px solid #b9d8e8 !important;
  border-radius: 3px !important;
  box-shadow: 1px 1px 0 rgba(170,206,226,.25) !important;
}

/* a little more neocities-style text feel */
body.home-page .retro-title,
body.home-page .trip-info strong,
body.home-page .trip-info span,
body.home-page .dating-heart-caption,
body.home-page .dating-heart-date {
  letter-spacing: .02em !important;
}

/* make things feel less modern and more boxy */
body.home-page .retro-banner,
body.home-page .retro-box,
body.home-page .trip-row,
body.home-page .special-page-card,
body.home-page .food-card {
  border-radius: 4px !important;
}

/* optional cute tiny stars around some titles */
body.home-page .trip-panel .retro-title::before,
body.home-page .trip-panel .retro-title::after,
body.home-page .nav-panel .retro-title::before,
body.home-page .nav-panel .retro-title::after {
  content: "☆";
  display: inline-block;
  margin: 0 6px;
  color: #8a96c8;
  font-size: .8em;
}




/* ==== CHATGPT OUTSIDE-STAR-INSIDE-PLAID START ==== */

/* OUTSIDE PAGE = PLAID */
body.home-page {
  background:
    rgba(255,255,255,0.72)
    url("/images/patterns/blue-pink-gingham.jpg")
    center top / 340px auto repeat fixed !important;
}

/* MAIN BIG SITE FRAME = STAR PATTERN */
body.home-page .retro-home {
  background:
    rgba(255,255,255,0.88)
    url("/images/patterns/pink-stars.jpg")
    center / 260px auto repeat !important;

  border: 1px solid #8fcbe8 !important;
  border-radius: 8px !important;
  box-shadow:
    0 0 0 3px rgba(255,255,255,0.95),
    0 0 0 4px #a8d8ee !important;

  padding: 14px !important;
}

/* BANNER FRAME */
body.home-page .retro-banner {
  border: 1px solid #9fd0ea !important;
  border-radius: 6px !important;
  overflow: hidden !important;
}

/* INNER BOXES = PLAID */
body.home-page .retro-box {
  background:
    rgba(255,255,255,0.92)
    url("/images/patterns/pink-lavender-plaid.jpg")
    center / 280px auto repeat !important;

  border: 1px solid #9fd0ea !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}

/* title bars stay cleaner */
body.home-page .retro-title {
  border-bottom: 1px solid rgba(140,170,210,.35) !important;
  border-radius: 0 !important;
}

/* make borders thinner overall */
body.home-page .retro-banner,
body.home-page .retro-box,
body.home-page .trip-row,
body.home-page .food-card,
body.home-page .special-page-card,
body.home-page .dating-badge,
body.home-page .retro-nav a {
  box-shadow: none !important;
}

/* PANELS INSIDE KEEP THEIR CONTENT CLEAN */
body.home-page .main-photo-grid,
body.home-page .update-photo-grid,
body.home-page .special-page-grid,
body.home-page .food-grid,
body.home-page .trip-list,
body.home-page .world-cup-content,
body.home-page .profile-content {
  background: transparent !important;
}

/* NAV buttons */
body.home-page .retro-nav a {
  border: 1px solid #b7d9ea !important;
  border-radius: 4px !important;
}

/* TRIP PANEL */
body.home-page .trip-panel {
  background:
    rgba(255,255,255,0.92)
    url("/images/patterns/pink-lavender-plaid.jpg")
    center / 280px auto repeat !important;
}

body.home-page .trip-row {
  background: rgba(255,255,255,0.78) !important;
  border: 1px solid #c9b6eb !important;
  border-radius: 6px !important;
  min-height: 122px !important;
  padding: 12px 16px !important;
}

body.home-page .trip-icon {
  width: 110px !important;
  height: 110px !important;
  min-width: 110px !important;
  border: 1px solid #e2a8c8 !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.96) !important;
}

body.home-page .trip-icon img {
  width: 82px !important;
  height: 82px !important;
  object-fit: contain !important;
}

body.home-page .trip-info span {
  border: 1px solid #bca8e4 !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}

/* WORLD CUP BOX KEEP SIMPLE */
body.home-page .world-cup-panel {
  background:
    rgba(255,255,255,0.92)
    url("/images/patterns/pink-lavender-plaid.jpg")
    center / 280px auto repeat !important;
}

/* FOOD / おなかすいた */
body.home-page .food-panel {
  background:
    rgba(255,255,255,0.92)
    url("/images/patterns/pink-lavender-plaid.jpg")
    center / 280px auto repeat !important;
}

body.home-page .food-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

body.home-page .food-card {
  background: rgba(255,255,255,0.86) !important;
  border: 1px solid #e0b7cf !important;
  border-radius: 6px !important;
  padding: 14px 10px !important;
  min-height: 155px !important;
  text-align: center !important;
}

body.home-page .pixel-food-icon {
  display: block !important;
  width: 88px !important;
  height: 88px !important;
  margin: 0 auto 10px auto !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

/* replace the text icons with your pixel images */
body.home-page .food-card:nth-child(1) .pixel-food-icon {
  background-image: url("/images/icons/food-blue-boba.png") !important;
}
body.home-page .food-card:nth-child(2) .pixel-food-icon {
  background-image: url("/images/icons/food-pink-boba.png") !important;
}
body.home-page .food-card:nth-child(3) .pixel-food-icon {
  background-image: url("/images/icons/food-sundae.png") !important;
}

/* make food labels still cute */
body.home-page .food-card h3,
body.home-page .food-card strong,
body.home-page .food-card span:not(.pixel-food-icon),
body.home-page .food-card p {
  position: relative !important;
  z-index: 2 !important;
}

/* keep photos framed but not too heavy */
body.home-page .main-photo-grid img,
body.home-page .update-photo-grid img,
body.home-page .side-boba-photo img,
body.home-page .right-boba-photo img {
  border: 1px solid #ecabc8 !important;
  border-radius: 4px !important;
}

/* make things slightly less round / more boxy */
body.home-page .retro-banner,
body.home-page .retro-box,
body.home-page .food-card,
body.home-page .trip-row,
body.home-page .special-page-card {
  border-radius: 6px !important;
}

/* if you want the whole site to feel more neatly enclosed */
body.home-page .retro-grid {
  gap: 14px !important;
}

/* ==== CHATGPT OUTSIDE-STAR-INSIDE-PLAID END ==== */




/* ===== FINAL BACKGROUND HIERARCHY START ===== */

/*
  OUTSIDE PAGE:
  blue gingham
*/
body.home-page {
  margin: 0 !important;
  padding: 20px 0 42px !important;

  background-color: #eaf7fc !important;
  background-image:
    url("/images/patterns/blue-pink-gingham.jpg") !important;
  background-position: center top !important;
  background-size: 340px auto !important;
  background-repeat: repeat !important;
  background-attachment: fixed !important;
}

/*
  INSIDE THE LARGE OUTER BORDER:
  white background with pink stars

  This is only the space between all the boxes.
*/
body.home-page .retro-home {
  width: min(1240px, calc(100% - 30px)) !important;
  margin: 0 auto !important;
  padding: 13px !important;

  background-color: #fffefe !important;
  background-image:
    url("/images/patterns/pink-stars.jpg") !important;
  background-position: center top !important;
  background-size: 310px auto !important;
  background-repeat: repeat !important;

  border: 2px solid #8fcce6 !important;
  border-radius: 7px !important;

  box-shadow:
    0 0 0 4px rgba(255,255,255,.97),
    0 0 0 5px #b7dff0,
    0 7px 0 rgba(111,184,215,.18) !important;

  box-sizing: border-box !important;
}

/*
  Keep the gaps between columns transparent,
  so the star background remains visible.
*/
body.home-page .retro-grid,
body.home-page .retro-column {
  background: transparent !important;
}

/*
  KEEP EACH INDIVIDUAL BOX'S PATTERN
*/

/* Profile */
body.home-page .profile-panel {
  background:
    rgba(255,255,255,.91)
    url("/images/patterns/pink-gingham.jpg")
    center / 250px auto repeat !important;
}

body.home-page .profile-content {
  background: transparent !important;
}

/* Navigation */
body.home-page .nav-panel {
  background:
    rgba(255,255,255,.90)
    url("/images/patterns/blue-polka.jpg")
    center / 220px auto repeat !important;
}

body.home-page .retro-nav {
  background: transparent !important;
}

/* Left boba photo */
body.home-page .boba-side-panel {
  background:
    rgba(255,255,255,.90)
    url("/images/patterns/pink-yellow-gingham.jpg")
    center / 260px auto repeat !important;
}

/* Main photo area */
body.home-page .photo-panel {
  background:
    rgba(255,255,255,.90)
    url("/images/patterns/pink-sage-classic-plaid.jpg")
    center / 320px auto repeat !important;
}

body.home-page .main-photo-grid {
  background: transparent !important;
}

/* 이거몰까요~ */
body.home-page .special-panel {
  background:
    rgba(255,255,255,.90)
    url("/images/patterns/pastel-rainbow-diamond.jpg")
    center / 315px auto repeat !important;
}

body.home-page .special-page-grid {
  background: transparent !important;
}

/* おなかすいた */
body.home-page .food-panel {
  background:
    rgba(255,255,255,.90)
    url("/images/patterns/pink-yellow-gingham.jpg")
    center / 285px auto repeat !important;
}

body.home-page .food-grid {
  background: transparent !important;
}

/* Recent pictures */
body.home-page .update-panel {
  background:
    rgba(255,255,255,.90)
    url("/images/patterns/pink-sage-lace-plaid.jpg")
    center / 300px auto repeat !important;
}

body.home-page .update-photo-grid {
  background: transparent !important;
}

/* Trips */
body.home-page .trip-panel {
  background:
    rgba(255,255,255,.90)
    url("/images/patterns/lavender-yellow-plaid.jpg")
    center / 285px auto repeat !important;
}

body.home-page .trip-list {
  background: transparent !important;
}

/* World Cup */
body.home-page .world-cup-panel {
  background:
    rgba(255,255,255,.91)
    url("/images/patterns/yellow-blue-polka.jpg")
    center / 210px auto repeat !important;
}

body.home-page .world-cup-content {
  background: transparent !important;
}

/* Right boba photo */
body.home-page .boba-right-panel {
  background:
    rgba(255,255,255,.90)
    url("/images/patterns/sage-soft-gingham.jpg")
    center / 250px auto repeat !important;
}

/*
  Keep the individual cards mostly white,
  so their surrounding panel pattern still shows.
*/
body.home-page .trip-row,
body.home-page .food-card,
body.home-page .special-page-card {
  background-color: rgba(255,255,255,.82) !important;
}

/*
  Keep the current thin blue borders.
*/
body.home-page .retro-banner,
body.home-page .retro-box {
  border: 1px solid #8fcce6 !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}

body.home-page .retro-title {
  border-bottom: 1px solid rgba(120,171,198,.38) !important;
}

/* ===== FINAL BACKGROUND HIERARCHY END ===== */




/* === WIDGET SWAP + TRIP ICON CLEANUP START === */

/* trip cards: remove circle frame, put kitty directly on pattern */
body.home-page .trip-row {
  grid-template-columns: 132px 1fr !important;
  gap: 14px !important;
  align-items: center !important;
}

body.home-page .trip-icon {
  width: 120px !important;
  min-width: 120px !important;
  height: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 auto !important;
}

body.home-page .trip-icon img {
  width: 106px !important;
  max-width: 106px !important;
  height: auto !important;
  display: block !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* make the text block align nicely after removing the circle */
body.home-page .trip-info {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 10px !important;
}

body.home-page .trip-info strong,
body.home-page .trip-info .trip-name {
  font-size: 18px !important;
  line-height: 1.15 !important;
}

/* bottom-left "ふええええ" widget */
body.home-page .us-lately-holder {
  padding: 12px !important;
}

body.home-page .us-lately-photo,
body.home-page .boba-side-panel .right-boba-photo,
body.home-page .boba-side-panel .side-boba-photo {
  width: 100% !important;
  aspect-ratio: 4 / 5 !important;
  border-radius: 8px !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  border: 1px solid #dcbfd1 !important;
  box-sizing: border-box !important;
}

/* bottom-right calendar widget */
body.home-page .calendar-shell {
  padding: 10px 10px 12px !important;
}

body.home-page .mini-clock {
  margin: 0 0 8px 0 !important;
  padding: 6px 8px !important;
  text-align: center !important;
  font-weight: 800 !important;
  font-size: 18px !important;
  color: #86a1c8 !important;

  background:
    rgba(255,255,255,.76)
    url("/images/patterns/blue-pink-gingham.jpg")
    center / 180px auto repeat !important;

  border: 1px solid #b9d7ea !important;
  border-radius: 7px !important;
}

body.home-page .mini-calendar-header {
  margin: 0 0 8px 0 !important;
  text-align: center !important;
  font-weight: 800 !important;
  font-size: 18px !important;
  color: #7d6f5d !important;
}

body.home-page .mini-calendar-grid {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  gap: 3px !important;
  align-items: center !important;
}

body.home-page .mini-cal-dow {
  text-align: center !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  color: #b26d8d !important;
  padding: 3px 0 !important;
}

body.home-page .mini-cal-empty,
body.home-page .mini-cal-day {
  min-height: 26px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 12px !important;
  border-radius: 5px !important;
  box-sizing: border-box !important;
}

body.home-page .mini-cal-day {
  background: rgba(255,255,255,.72) !important;
  border: 1px solid rgba(219,190,127,.42) !important;
  color: #6e7187 !important;
}

body.home-page .mini-cal-day.today {
  background: #fff0f6 !important;
  border: 1px solid #de9dbc !important;
  color: #b25d87 !important;
  font-weight: 900 !important;
}

/* keep right widget looking neat */
body.home-page .boba-right-panel .retro-title {
  margin-bottom: 0 !important;
}

/* a little better on narrow screens */
@media (max-width: 900px) {
  body.home-page .trip-row {
    grid-template-columns: 1fr !important;
    text-align: center !important;
  }

  body.home-page .trip-icon {
    width: 100% !important;
  }

  body.home-page .trip-info {
    align-items: center !important;
  }
}

/* === WIDGET SWAP + TRIP ICON CLEANUP END === */


/* Restore the bottom-left ふええええ photo */
body.home-page .us-lately-holder {
  padding: 10px !important;
}

body.home-page img.us-lately-photo {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 5 !important;

  object-fit: cover !important;
  object-position: center !important;

  background: transparent !important;
  border: 1px solid #ddb3c9 !important;
  border-radius: 4px !important;
}

/* Two-photo ふええええ gallery */
body.home-page .us-lately-holder {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
  padding: 8px !important;
}

body.home-page img.us-lately-photo {
  display: block !important;
  width: 100% !important;
  height: 215px !important;
  aspect-ratio: auto !important;

  object-fit: cover !important;
  object-position: center !important;

  border: 1px solid #ddb3c9 !important;
  border-radius: 4px !important;
  background: transparent !important;
}

/* Slightly adjust each crop */
body.home-page img.us-lately-photo:first-child {
  object-position: center 42% !important;
}

body.home-page img.us-lately-photo:last-child {
  object-position: center 45% !important;
}

/* =========================
   Compact Neocities trip box
   ========================= */
body.home-page .trip-panel {
  padding: 0 !important;
  overflow: hidden !important;
}

body.home-page .trip-panel .retro-title {
  padding: 10px 8px !important;
  font-size: 17px !important;
  letter-spacing: 0.3px !important;
}

body.home-page .trip-list {
  padding: 10px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

body.home-page .trip-row {
  display: grid !important;
  grid-template-columns: 88px 1fr !important;
  align-items: center !important;
  gap: 10px !important;

  min-height: 92px !important;
  padding: 10px 12px !important;

  border: 1px solid #cdb8ef !important;
  border-radius: 8px !important;
  background:
    linear-gradient(rgba(255,255,255,0.72), rgba(255,255,255,0.72)),
    url('/images/patterns/pink-sage-lace-plaid.jpg') center/cover no-repeat !important;
  box-sizing: border-box !important;
}

body.home-page .trip-icon {
  width: 72px !important;
  height: 72px !important;
  min-width: 72px !important;
  min-height: 72px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.home-page .trip-icon img,
body.home-page .trip-icon picture,
body.home-page .trip-icon svg {
  width: 64px !important;
  height: 64px !important;
  object-fit: contain !important;
  display: block !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

body.home-page .trip-info {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  gap: 8px !important;
  min-width: 0 !important;
}

body.home-page .trip-info h3,
body.home-page .trip-info .trip-name,
body.home-page .trip-info strong {
  margin: 0 !important;
  font-size: 16px !important;
  line-height: 1.05 !important;
  font-weight: 800 !important;
  color: #67779c !important;
  text-align: left !important;
  word-break: keep-all !important;
}

body.home-page .trip-info span[id^="trip-"],
body.home-page .trip-info .trip-days,
body.home-page .trip-info .trip-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-width: 86px !important;
  height: 40px !important;
  padding: 0 14px !important;

  border: 1.5px solid #bca8e9 !important;
  border-radius: 999px !important;
  background: #f3ecff !important;

  font-size: 13px !important;
  font-weight: 800 !important;
  color: #8b78b2 !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
}

/* Slightly tighter on smaller screens */
@media (max-width: 900px) {
  body.home-page .trip-row {
    grid-template-columns: 78px 1fr !important;
    min-height: 84px !important;
    padding: 8px 10px !important;
  }

  body.home-page .trip-icon {
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    min-height: 64px !important;
  }

  body.home-page .trip-icon img,
  body.home-page .trip-icon picture,
  body.home-page .trip-icon svg {
    width: 58px !important;
    height: 58px !important;
  }

  body.home-page .trip-info h3,
  body.home-page .trip-info .trip-name,
  body.home-page .trip-info strong {
    font-size: 14px !important;
  }

  body.home-page .trip-info span[id^="trip-"],
  body.home-page .trip-info .trip-days,
  body.home-page .trip-info .trip-pill {
    min-width: 76px !important;
    height: 36px !important;
    font-size: 12px !important;
  }
}

/* Soccer divider between World Cup and calendar */
body.home-page .soccer-divider {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;

  padding: 8px 0 !important;
  margin: 0 !important;

  background: transparent !important;
  border: 0 !important;
}

body.home-page .soccer-divider img {
  display: block !important;

  width: 72px !important;
  height: 72px !important;

  object-fit: contain !important;

  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  image-rendering: pixelated;
}

/* =========================================================
   COMPACT NEOCITIES LAYOUT
   Narrower overall page, tighter center blocks, less whitespace
========================================================= */

/* More gingham visible on both sides */
body.home-page .retro-home {
  width: min(1080px, calc(100% - 70px)) !important;
  padding: 9px !important;
  margin: 18px auto 34px !important;
}

/* Tighter 3-column proportions */
body.home-page .retro-grid {
  grid-template-columns:
    170px
    minmax(0, 1fr)
    220px !important;

  gap: 7px !important;
  margin-top: 7px !important;
}

/* Less vertical space between blocks */
body.home-page .retro-column {
  gap: 7px !important;
}

/* Shorter title bars */
body.home-page .retro-title {
  min-height: 27px !important;
  padding: 4px 7px !important;
  font-size: .72rem !important;
  line-height: 1.05 !important;
}

/* Reduce general panel padding */
body.home-page .profile-content,
body.home-page .retro-nav,
body.home-page .main-photo-grid,
body.home-page .special-page-grid,
body.home-page .food-grid,
body.home-page .update-photo-grid,
body.home-page .trip-list,
body.home-page .world-cup-content,
body.home-page .us-lately-holder,
body.home-page .calendar-shell {
  padding: 7px !important;
}

/* Main photo section: shorter and more compact */
body.home-page .main-photo-grid {
  grid-template-columns:
    repeat(2, minmax(0, 1fr)) !important;

  gap: 7px !important;
}

body.home-page .main-photo-grid figure {
  height: 345px !important;
  max-height: 345px !important;
  margin: 0 !important;
}

body.home-page .main-photo-grid img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Make the center panels feel less tall */
body.home-page .special-page-grid {
  gap: 7px !important;
}

body.home-page .special-page-card {
  min-height: 92px !important;
  padding: 9px !important;
}

body.home-page .special-page-card span,
body.home-page .special-page-card strong {
  font-size: .72rem !important;
}

/* Compact food cards */
body.home-page .food-grid {
  gap: 7px !important;
}

body.home-page .food-card {
  min-height: 120px !important;
  padding: 8px 6px !important;
}

body.home-page .pixel-food-icon {
  width: 72px !important;
  height: 72px !important;
  margin-bottom: 5px !important;
}

body.home-page .food-card strong,
body.home-page .food-card span:not(.pixel-food-icon) {
  font-size: .68rem !important;
}

/* Recent photos: compact but still readable */
body.home-page .update-photo-grid {
  gap: 7px !important;
}

body.home-page .update-photo-grid img {
  height: 265px !important;
  object-fit: cover !important;
}

/* Compact profile */
body.home-page .profile-photo {
  width: 92px !important;
  height: 92px !important;
  margin: 8px auto !important;
}

body.home-page .profile-name {
  font-size: .72rem !important;
  line-height: 1.3 !important;
}

body.home-page .profile-message {
  font-size: .74rem !important;
  line-height: 1.25 !important;
}

/* Navigation tighter */
body.home-page .retro-nav {
  gap: 4px !important;
}

body.home-page .retro-nav a,
body.home-page .aitai-button {
  min-height: 32px !important;
  padding: 5px 7px !important;
  font-size: .68rem !important;
}

/* Compact trip panel */
body.home-page .trip-list {
  gap: 6px !important;
}

body.home-page .trip-row {
  grid-template-columns:
    62px
    minmax(0, 1fr) !important;

  min-height: 76px !important;
  padding: 7px 8px !important;
  gap: 7px !important;
}

body.home-page .trip-icon {
  width: 58px !important;
  min-width: 58px !important;
  height: 58px !important;
  min-height: 58px !important;
}

body.home-page .trip-icon img {
  width: 54px !important;
  height: 54px !important;
}

body.home-page .trip-info {
  gap: 5px !important;
}

body.home-page .trip-info strong {
  margin: 0 !important;
  font-size: .67rem !important;
  line-height: 1.1 !important;
}

body.home-page .trip-info span {
  min-width: 52px !important;
  padding: 4px 8px !important;
  font-size: .65rem !important;
}

/* Compact world cup widget */
body.home-page .world-next-list {
  gap: 4px !important;
}

body.home-page .world-next-card {
  padding: 5px !important;
}

body.home-page .world-next-teams {
  font-size: .62rem !important;
}

body.home-page .world-next-time {
  font-size: .5rem !important;
}

/* Compact ふええええ */
body.home-page .us-lately-holder {
  gap: 6px !important;
}

body.home-page img.us-lately-photo {
  height: 150px !important;
}

/* Compact calendar */
body.home-page .mini-clock {
  margin-bottom: 5px !important;
  padding: 4px 6px !important;
  font-size: .78rem !important;
}

body.home-page .mini-calendar-header {
  margin-bottom: 5px !important;
  font-size: .72rem !important;
}

body.home-page .mini-calendar-grid {
  gap: 2px !important;
}

body.home-page .mini-cal-dow,
body.home-page .mini-cal-day {
  font-size: .55rem !important;
}

body.home-page .mini-cal-day,
body.home-page .mini-cal-empty {
  min-height: 20px !important;
}

/* Slightly smaller banner for a tighter layout */
body.home-page .retro-banner {
  min-height: 205px !important;
}

body.home-page .retro-banner-title {
  font-size: clamp(2rem, 4vw, 3.5rem) !important;
}

/* Smaller dating badge */
body.home-page .dating-badge {
  min-width: 145px !important;
  padding: 6px 8px !important;
}

body.home-page .dating-heart-digit {
  width: 27px !important;
  height: 25px !important;
  font-size: .64rem !important;
}

/* Tighter card corners */
body.home-page .retro-box,
body.home-page .retro-banner,
body.home-page .trip-row,
body.home-page .food-card,
body.home-page .special-page-card {
  border-radius: 3px !important;
}

/* Narrow screens */
@media (max-width: 950px) {
  body.home-page .retro-home {
    width: min(900px, calc(100% - 34px)) !important;
  }

  body.home-page .retro-grid {
    grid-template-columns:
      160px
      minmax(0, 1fr)
      205px !important;
  }
}

@media (max-width: 760px) {
  body.home-page .retro-home {
    width: calc(100% - 18px) !important;
  }

  body.home-page .retro-grid {
    grid-template-columns: 1fr !important;
  }

  body.home-page .main-photo-grid {
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   OLD-WEB / NEOCITIES TRIP WIDGET
========================================================= */

/* Outer trip panel */
body.home-page .trip-panel {
  overflow: hidden !important;

  background:
    url("/images/patterns/lavender-yellow-plaid.jpg")
    center / 240px auto repeat !important;

  border: 1px solid #8fc7df !important;
  border-radius: 2px !important;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.75) !important;
}

/* Small old-web title strip */
body.home-page .trip-panel > .retro-title {
  min-height: 25px !important;
  padding: 4px 6px !important;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.88),
      rgba(230,220,250,.88)
    ) !important;

  border-bottom: 1px solid #a9c9dc !important;
  border-radius: 0 !important;

  font-size: .72rem !important;
  letter-spacing: .04em !important;
}

body.home-page .trip-panel > .retro-title::before,
body.home-page .trip-panel > .retro-title::after {
  content: "☆" !important;
  margin: 0 5px !important;
  color: #8794bf !important;
}

/* Tighter panel interior */
body.home-page .trip-list {
  display: grid !important;
  gap: 5px !important;

  padding: 6px !important;

  background:
    rgba(255,255,255,.14)
    url("/images/patterns/lavender-yellow-plaid.jpg")
    center / 240px auto repeat !important;
}

/* Each trip becomes a compact old-web row */
body.home-page .trip-row {
  display: grid !important;
  grid-template-columns: 55px minmax(0, 1fr) 55px !important;
  align-items: center !important;
  gap: 7px !important;

  min-height: 69px !important;
  padding: 6px 7px !important;

  background:
    rgba(255,255,255,.74)
    url("/images/patterns/pink-sage-classic-plaid.jpg")
    center / 230px auto repeat !important;

  border: 1px solid #b9add4 !important;
  border-radius: 1px !important;

  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.95),
    inset -1px -1px 0 rgba(151,133,181,.25) !important;
}

/* Tiny alternating row accent */
body.home-page .trip-row:nth-child(even) {
  background:
    rgba(255,255,255,.75)
    url("/images/patterns/pastel-rainbow-diamond.jpg")
    center / 240px auto repeat !important;
}

/* Hello Kitty image directly on the pattern */
body.home-page .trip-icon {
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  min-height: 52px !important;

  display: grid !important;
  place-items: center !important;

  padding: 0 !important;
  margin: 0 !important;

  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body.home-page .trip-icon img {
  width: 49px !important;
  height: 49px !important;

  object-fit: contain !important;

  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  image-rendering: auto !important;
}

/* Trip name */
body.home-page .trip-info {
  display: block !important;
  min-width: 0 !important;
}

body.home-page .trip-info strong {
  display: block !important;
  margin: 0 !important;

  color: #607393 !important;

  font-family:
    "Nunito",
    "M PLUS Rounded 1c",
    sans-serif !important;

  font-size: .68rem !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  text-align: left !important;
}

/* Remove the modern rounded D-day pill */
body.home-page .trip-info span,
body.home-page .trip-info span[id^="trip-"] {
  grid-column: 3 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 51px !important;
  min-width: 51px !important;
  height: 27px !important;
  padding: 0 3px !important;
  margin: 0 !important;

  color: #735f96 !important;
  background:
    repeating-linear-gradient(
      0deg,
      #f8f2ff 0,
      #f8f2ff 3px,
      #eee4fa 3px,
      #eee4fa 4px
    ) !important;

  border: 1px solid #a994c8 !important;
  border-radius: 1px !important;

  box-shadow:
    inset 1px 1px 0 #ffffff,
    inset -1px -1px 0 rgba(111,86,147,.22) !important;

  font-family:
    "IBM Plex Mono",
    monospace !important;

  font-size: .62rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-align: center !important;
}

/* Put D-day box in the third column */
body.home-page .trip-row {
  position: relative !important;
}

body.home-page .trip-row .trip-info {
  display: contents !important;
}

body.home-page .trip-row .trip-info strong {
  grid-column: 2 !important;
}

body.home-page .trip-row .trip-info span {
  grid-column: 3 !important;
}

/* Tiny decorative separator */
body.home-page .trip-row::after {
  content: "⋆" !important;

  position: absolute !important;
  right: 3px !important;
  bottom: 1px !important;

  color: rgba(164,129,184,.45) !important;
  font-size: .6rem !important;
}

/* Keep it compact on narrower screens */
@media (max-width: 760px) {
  body.home-page .trip-row {
    grid-template-columns: 49px minmax(0, 1fr) 50px !important;
  }

  body.home-page .trip-icon,
  body.home-page .trip-icon img {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
  }
}

/* =========================================================
   BLUE GINGHAM OUTSIDE + VIBRANT RETRO CALENDAR
========================================================= */

/* Absolute outermost browser background */
html,
body,
body.home-page {
  background-color: #dff2fb !important;
  background-image:
    url("/images/patterns/blue-pink-gingham.jpg") !important;
  background-position: center top !important;
  background-size: 280px auto !important;
  background-repeat: repeat !important;
  background-attachment: fixed !important;
}

/* Keep the interior of the main website star patterned */
body.home-page .retro-home {
  background-color: #fffefe !important;
  background-image:
    url("/images/patterns/pink-stars.jpg") !important;
  background-position: center top !important;
  background-size: 280px auto !important;
  background-repeat: repeat !important;

  border: 2px solid #89c9e5 !important;
  box-shadow:
    0 0 0 3px #ffffff,
    0 0 0 4px #acdced !important;
}

/* =========================================================
   SEPARATE CLOCK BOX
========================================================= */

body.home-page .clock-panel {
  overflow: hidden !important;

  background:
    url("/images/patterns/blue-pink-gingham.jpg")
    center / 190px auto repeat !important;

  border: 1px solid #87c7e3 !important;
  border-radius: 3px !important;
}

body.home-page .clock-panel .retro-title {
  min-height: 25px !important;
  padding: 4px 6px !important;

  background:
    linear-gradient(
      180deg,
      #eefaff 0%,
      #ccecf8 100%
    ) !important;

  border-bottom: 1px solid #8bc8e1 !important;

  color: #657da2 !important;
  font-size: .72rem !important;
  text-align: center !important;
}

body.home-page .retro-clock-display {
  margin: 7px !important;
  padding: 6px 5px !important;

  color: #7295c1 !important;
  background:
    rgba(255,255,255,.80)
    url("/images/patterns/blue-polka.jpg")
    center / 125px auto repeat !important;

  border: 1px solid #8fc8e2 !important;
  border-radius: 3px !important;

  box-shadow:
    inset 1px 1px 0 #ffffff,
    inset -1px -1px 0 rgba(97,147,180,.22) !important;

  font-family:
    "M PLUS Rounded 1c",
    "Nunito",
    sans-serif !important;

  font-size: 1.25rem !important;
  font-weight: 900 !important;
  letter-spacing: .12em !important;
  line-height: 1 !important;
  text-align: center !important;
}

/* =========================================================
   VIBRANT NEOCITIES CALENDAR
========================================================= */

body.home-page .boba-right-panel.calendar-panel {
  overflow: hidden !important;

  background:
    url("/images/patterns/blue-pink-gingham.jpg")
    center / 210px auto repeat !important;

  border: 1px solid #85c8e4 !important;
  border-radius: 3px !important;
}

body.home-page .calendar-panel > .retro-title {
  min-height: 26px !important;
  padding: 4px 6px !important;

  background:
    linear-gradient(
      180deg,
      #ffe8f2 0%,
      #ffcce2 100%
    ) !important;

  border-bottom: 1px solid #e695bb !important;

  color: #8c6685 !important;
  font-size: .72rem !important;
  text-align: center !important;
}

body.home-page .calendar-shell {
  padding: 7px !important;

  background:
    rgba(255,255,255,.28)
    url("/images/patterns/sage-soft-gingham.jpg")
    center / 175px auto repeat !important;
}

/* Hide the old clock inside the calendar */
body.home-page .calendar-shell > .mini-clock {
  display: none !important;
}

/* Green month strip like the reference */
body.home-page .mini-calendar-header {
  margin: 0 0 5px !important;
  padding: 4px 3px !important;

  color: #4b596e !important;
  background: #d9ffbd !important;

  border: 1px solid #ef86c0 !important;
  border-radius: 1px !important;

  font-family:
    "M PLUS Rounded 1c",
    sans-serif !important;

  font-size: .72rem !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  text-align: center !important;
}

/* Calendar grid */
body.home-page .mini-calendar-grid {
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  gap: 1px !important;

  padding: 1px !important;

  background: #f39bc9 !important;
  border: 1px solid #eb83bd !important;
}

/* Weekday labels */
body.home-page .mini-cal-dow {
  min-width: 0 !important;
  padding: 4px 0 !important;

  color: #4f5567 !important;
  background: #fff7bd !important;

  border: 0 !important;
  border-radius: 0 !important;

  font-family:
    "M PLUS Rounded 1c",
    sans-serif !important;

  font-size: .55rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-align: center !important;
}

/* Sunday */
body.home-page .mini-cal-dow:nth-child(1) {
  color: #c94f65 !important;
  background: #ffd7dc !important;
}

/* Saturday */
body.home-page .mini-cal-dow:nth-child(7) {
  color: #557ab0 !important;
  background: #dcecff !important;
}

/* Day and empty cells */
body.home-page .mini-cal-day,
body.home-page .mini-cal-empty {
  min-width: 0 !important;
  min-height: 27px !important;
  padding: 2px 0 !important;

  border: 0 !important;
  border-radius: 0 !important;

  font-family:
    "M PLUS Rounded 1c",
    sans-serif !important;

  font-size: .55rem !important;
  line-height: 1 !important;
  text-align: center !important;
}

body.home-page .mini-cal-day {
  color: #4f5669 !important;
  background: rgba(255,255,255,.93) !important;
}

body.home-page .mini-cal-empty {
  background: rgba(233,249,255,.88) !important;
}

/* Alternating pastel day cells */
body.home-page .mini-cal-day:nth-child(7n + 1) {
  color: #c85868 !important;
  background: #fff0ef !important;
}

body.home-page .mini-cal-day:nth-child(7n) {
  color: #597eb0 !important;
  background: #eef7ff !important;
}

/* Highlight today's date */
body.home-page .mini-cal-day.today {
  color: #ffffff !important;
  background:
    linear-gradient(
      180deg,
      #f594c2,
      #dc67a5
    ) !important;

  box-shadow:
    inset 0 0 0 1px #ffffff !important;

  font-weight: 900 !important;
}

/* Small decorative footer */
body.home-page .calendar-footer {
  margin-top: 5px !important;
  padding: 3px !important;

  color: #8a7595 !important;
  background: rgba(255,241,248,.92) !important;

  border: 1px solid #e5a2c3 !important;

  font-size: .51rem !important;
  font-weight: 800 !important;
  text-align: center !important;
}

/* Keep clock and calendar tight in the sidebar */
body.home-page .retro-right {
  gap: 6px !important;
}



/* ===== SHUMA NEOCITIES PATCH v4 ===== */
:root{
  --shuma-blue:#8fc8ef;
  --shuma-blue-dark:#6f9fcb;
  --shuma-pink:#e7a8c6;
  --shuma-lav:#cdb6eb;
  --shuma-ink:#697b9d;
  --shuma-cream:#fffdfb;
}

body{
  background: #eef7ff url('/images/patterns/blue-gingham.jpg') repeat !important;
  background-size: 220px auto !important;
}

.retro-home{
  max-width: 1240px !important;
  margin: 18px auto !important;
  padding: 8px !important;
  background: rgba(255,255,255,.93) url('/images/patterns/purple-stars.jpg') repeat !important;
  background-size: 260px auto !important;
  border: 2px solid var(--shuma-blue) !important;
  box-shadow:
    0 0 0 4px #ffffff,
    0 0 0 6px var(--shuma-blue) !important;
}

.retro-box{
  border: 2px solid var(--shuma-blue) !important;
  box-shadow: inset 0 0 0 1px #ffffff !important;
  overflow: visible !important;
}

.retro-title{
  color: var(--shuma-ink) !important;
  border-bottom: 1px solid rgba(105,123,157,.18) !important;
  letter-spacing: .4px !important;
  font-weight: 800 !important;
}

/* panel-specific backgrounds so they stop looking identical */
.retro-box.profile-panel{
  background: rgba(255,255,255,.94) url('/images/patterns/lavender-polka.jpg') repeat !important;
  background-size: 220px auto !important;
  position: relative !important;
}
.profile-panel .retro-title{
  background: rgba(255,255,255,.82) url('/images/patterns/lavender-polka.jpg') repeat !important;
  background-size: 220px auto !important;
}

.retro-box.photo-panel{
  background: rgba(255,255,255,.94) url('/images/patterns/green-gingham.jpg') repeat !important;
  background-size: 220px auto !important;
  position: relative !important;
}
.photo-panel .retro-title{
  background: rgba(255,255,255,.84) url('/images/patterns/lavender-stripe.png') repeat !important;
  background-size: 180px auto !important;
}

.retro-box.trip-panel{
  background: rgba(255,255,255,.94) url('/images/patterns/lavender-stripe.png') repeat !important;
  background-size: 180px auto !important;
  position: relative !important;
}
.trip-panel .retro-title{
  background: rgba(255,255,255,.84) url('/images/patterns/lavender-polka.jpg') repeat !important;
  background-size: 220px auto !important;
}

.retro-box.special-panel{
  background: rgba(255,255,255,.94) url('/images/patterns/orange-gingham.jpg') repeat !important;
  background-size: 220px auto !important;
  position: relative !important;
}
.special-panel .retro-title{
  background: rgba(255,255,255,.84) url('/images/patterns/blue-gingham.jpg') repeat !important;
  background-size: 220px auto !important;
}

.retro-box.food-panel{
  background: rgba(255,255,255,.94) url('/images/patterns/orange-gingham.jpg') repeat !important;
  background-size: 220px auto !important;
  position: relative !important;
}
.food-panel .retro-title{
  background: rgba(255,255,255,.84) url('/images/patterns/lavender-polka.jpg') repeat !important;
  background-size: 220px auto !important;
}

.retro-box.update-panel{
  background: rgba(255,255,255,.94) url('/images/patterns/green-gingham.jpg') repeat !important;
  background-size: 220px auto !important;
  position: relative !important;
}
.update-panel .retro-title{
  background: rgba(255,255,255,.84) url('/images/patterns/lavender-stripe.png') repeat !important;
  background-size: 180px auto !important;
}

/* section-specific card looks */
.special-page-card{
  position: relative !important;
  overflow: visible !important;
  border: 2px solid var(--shuma-pink) !important;
  background-color: rgba(255,255,255,.83) !important;
}
.special-page-card:nth-child(1){
  background-image: url('/images/patterns/lavender-polka.jpg') !important;
  background-size: 220px auto !important;
}
.special-page-card:nth-child(2){
  background-image: url('/images/patterns/lavender-stripe.png') !important;
  background-size: 180px auto !important;
}
.special-page-card:nth-child(3){
  background-image: url('/images/patterns/purple-stars.jpg') !important;
  background-size: 240px auto !important;
}

/* overlapping corner icons */
.special-page-card:nth-child(1)::before{
  content:"";
  position:absolute;
  left:12px; top:10px;
  width:42px; height:42px;
  background:url('/images/icons/clover-green.png') center/contain no-repeat;
  pointer-events:none;
}
.special-page-card:nth-child(1)::after{
  content:"";
  position:absolute;
  right:-8px; top:-10px;
  width:56px; height:38px;
  background:url('/images/icons/stars-duo.png') center/contain no-repeat;
  pointer-events:none;
}

.special-page-card:nth-child(2)::before{
  content:"";
  position:absolute;
  left:14px; top:12px;
  width:40px; height:32px;
  background:url('/images/icons/envelope-pink.png') center/contain no-repeat;
  pointer-events:none;
}
.special-page-card:nth-child(2)::after{
  content:"";
  position:absolute;
  right:-8px; top:-10px;
  width:56px; height:38px;
  background:url('/images/icons/stars-duo.png') center/contain no-repeat;
  pointer-events:none;
}

.special-page-card:nth-child(3)::before{
  content:"";
  position:absolute;
  left:12px; top:8px;
  width:46px; height:40px;
  background:url('/images/icons/heart-pink.png') center/contain no-repeat;
  pointer-events:none;
}
.special-page-card:nth-child(3)::after{
  content:"";
  position:absolute;
  right:-8px; top:-10px;
  width:56px; height:38px;
  background:url('/images/icons/stars-duo.png') center/contain no-repeat;
  pointer-events:none;
}

/* trip cards more neocities / less same-y */
.trip-row{
  background: rgba(255,255,255,.86) !important;
  border: 2px solid var(--shuma-lav) !important;
  border-radius: 0 !important;
  box-shadow: inset 0 0 0 1px #fff !important;
  padding: 10px 12px !important;
  gap: 12px !important;
}
.trip-row:nth-child(1){ background-image:url('/images/patterns/green-gingham.jpg') !important; }
.trip-row:nth-child(2){ background-image:url('/images/patterns/blue-gingham.jpg') !important; }
.trip-row:nth-child(3){ background-image:url('/images/patterns/lavender-polka.jpg') !important; }
.trip-row:nth-child(4){ background-image:url('/images/patterns/orange-gingham.jpg') !important; }
.trip-row{
  background-size: 220px auto !important;
}

.trip-icon,
.trip-icon img{
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}
.trip-icon img{
  width: 70px !important;
  height: 70px !important;
  object-fit: contain !important;
  display: block !important;
}

.trip-info{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:14px !important;
  width:100% !important;
}
.trip-info strong,
.trip-info .trip-title{
  color: var(--shuma-ink) !important;
  font-size: 18px !important;
  line-height: 1.1 !important;
}
.trip-info span{
  margin-left:auto !important;
  display:inline-block !important;
  min-width:84px !important;
  text-align:center !important;
  padding: 8px 10px !important;
  background: rgba(255,255,255,.75) !important;
  border: 2px solid var(--shuma-lav) !important;
  border-radius: 0 !important;
  box-shadow: inset 0 0 0 1px #fff !important;
  font-weight: 800 !important;
  color: #7f6aaa !important;
}

/* remove duplicate food icon effect by hiding any direct top-level image */
.food-card{
  position: relative !important;
  min-height: 280px !important;
  padding: 20px 14px 18px !important;
  background: rgba(255,255,255,.88) !important;
  border: 2px solid var(--shuma-pink) !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap: 16px !important;
}

.food-card:nth-child(1){ background-image:url('/images/patterns/orange-gingham.jpg') !important; background-size:220px auto !important; }
.food-card:nth-child(2){ background-image:url('/images/patterns/lavender-stripe.png') !important; background-size:180px auto !important; }
.food-card:nth-child(3){ background-image:url('/images/patterns/lavender-polka.jpg') !important; background-size:220px auto !important; }

.food-card > img{
  display:none !important;
}

.pixel-food-icon{
  width: 132px !important;
  height: 132px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background: rgba(255,255,255,.86) !important;
  border: 2px solid #e7c862 !important;
  box-shadow: inset 0 0 0 1px #fff !important;
  border-radius: 6px !important;
  overflow:hidden !important;
  font-size:0 !important;
  color: transparent !important;
}

.pixel-food-icon img{
  max-width: 86px !important;
  max-height: 86px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  background: transparent !important;
  display:block !important;
}

/* decorative overlap icons in food cards */
.food-card:nth-child(1)::before{
  content:"";
  position:absolute;
  top:10px; right:12px;
  width:24px; height:24px;
  background:url('/images/icons/cupcake-pink.png') center/contain no-repeat;
}
.food-card:nth-child(2)::before{
  content:"";
  position:absolute;
  top:10px; right:12px;
  width:28px; height:28px;
  background:url('/images/icons/lollipop-bluepink.png') center/contain no-repeat;
}
.food-card:nth-child(3)::before{
  content:"";
  position:absolute;
  top:10px; right:12px;
  width:24px; height:24px;
  background:url('/images/icons/bow-pink.png') center/contain no-repeat;
}

/* profile/photo extra stickers so they feel more neocities */
.profile-panel::after{
  content:"";
  position:absolute;
  right:16px; top:16px;
  width:44px; height:30px;
  background:url('/images/icons/blue-hearts.png') center/contain no-repeat;
  pointer-events:none;
}

.photo-panel::before{
  content:"";
  position:absolute;
  left:-16px; top:18px;
  width:62px; height:36px;
  background:url('/images/icons/blue-wings.png') center/contain no-repeat;
  pointer-events:none;
  z-index:5;
}

.photo-panel::after{
  content:"";
  position:absolute;
  right:14px; top:14px;
  width:52px; height:38px;
  background:url('/images/icons/cloud-stars.png') center/contain no-repeat;
  pointer-events:none;
  z-index:5;
}

/* modal */
.letter-modal-backdrop{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(60, 54, 82, .45);
  z-index: 9999;
  padding: 20px;
}
.letter-modal-backdrop.is-open{
  display:flex;
}
.letter-modal-window{
  position: relative;
  width: min(680px, 92vw);
  max-height: 86vh;
  overflow: auto;
  border: 2px solid var(--shuma-blue);
  box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--shuma-blue);
  background: rgba(255,255,255,.97) url('/images/patterns/lavender-polka.jpg') repeat;
  background-size: 220px auto;
  padding: 22px;
  border-radius: 8px;
}
.letter-close-btn{
  position:absolute;
  top:10px; right:12px;
  border:2px solid var(--shuma-pink);
  background:#fff7fb;
  color:#8a6b92;
  font-size:24px;
  line-height:1;
  width:36px; height:36px;
  border-radius:6px;
  cursor:pointer;
}
.letter-gate, .letter-content{
  text-align:center;
  color:#6e7d9a;
}
.letter-password-input{
  width:min(280px, 85%);
  padding:10px 12px;
  border:2px solid var(--shuma-lav);
  background:#fff;
  margin-top:10px;
  font-size:16px;
  color:#6b5f86;
  outline:none;
}
.letter-unlock-btn{
  display:block;
  margin:12px auto 0;
  padding:10px 16px;
  border:2px solid var(--shuma-pink);
  background:#fff7fb;
  color:#8a6b92;
  font-weight:700;
  cursor:pointer;
}
.letter-error{
  color:#cf6b93;
  font-weight:700;
  margin-top:10px;
}
.letter-scroll{
  margin-top:14px;
  padding:18px;
  text-align:left;
  max-height:55vh;
  overflow:auto;
  background:rgba(255,255,255,.82);
  border:2px solid var(--shuma-pink);
  box-shadow: inset 0 0 0 1px #fff;
  line-height:1.7;
  white-space:normal;
}

/* make sure pngs stay clean */
img[src$=".png"]{
  background: transparent !important;
}