/* =========================================================
   SHUMA NEOCITIES DECORATION PACK
   Loads last so older background rules cannot override it
========================================================= */

:root {
  --neo-blue: #8bc9e6;
  --neo-pink: #eea8c9;
  --neo-lavender: #c5afe8;
  --neo-cream: #fffdf5;
  --neo-text: #607394;
}

/* ---------------------------------------------------------
   TRUE OUTERMOST BACKGROUND: NEW BLUE GINGHAM
--------------------------------------------------------- */

html {
  min-height: 100%;
  background-color: #e7f5fc !important;
  background-image:
    url("/images/patterns/blue-gingham.jpg") !important;
  background-repeat: repeat !important;
  background-position: center top !important;
  background-size: 235px auto !important;
}

body,
body.home-page {
  min-height: 100vh !important;
  margin: 0 !important;
  background: transparent !important;
}

/* A fixed layer makes sure the blue gingham cannot disappear */
body.home-page::before {
  content: "";
  position: fixed;
  z-index: -10;
  inset: 0;

  background-color: #e7f5fc;
  background-image:
    url("/images/patterns/blue-gingham.jpg");
  background-repeat: repeat;
  background-position: center top;
  background-size: 235px auto;

  pointer-events: none;
}

/* Main website remains the white/pink-star interior */
body.home-page .retro-home {
  position: relative !important;
  z-index: 1 !important;

  width: min(1050px, calc(100% - 100px)) !important;
  margin: 22px auto 40px !important;
  padding: 9px !important;

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

  border: 1px solid var(--neo-blue) !important;
  border-radius: 4px !important;

  box-shadow:
    0 0 0 3px rgba(255,255,255,.96),
    0 0 0 4px #acdced,
    4px 5px 0 rgba(116,184,213,.20) !important;
}

/* ---------------------------------------------------------
   GENERAL OLD-WEB DENSITY
--------------------------------------------------------- */

body.home-page .retro-grid {
  gap: 7px !important;
}

body.home-page .retro-column {
  gap: 7px !important;
}

body.home-page .retro-box {
  border-width: 1px !important;
  border-radius: 3px !important;
  box-shadow: none !important;
}

body.home-page .retro-title {
  min-height: 25px !important;
  padding: 4px 7px !important;
  border-radius: 0 !important;

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

/* ---------------------------------------------------------
   NEW STARDew WIDGET — BOTTOM LEFT
--------------------------------------------------------- */

body.home-page .stardew-panel {
  position: relative !important;
  overflow: hidden !important;

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

  border: 1px solid #99c88b !important;
}

body.home-page .stardew-panel .retro-title {
  color: #617b53 !important;

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

  border-bottom: 1px solid #98c586 !important;
}

body.home-page .stardew-content {
  position: relative !important;

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

  min-height: 150px !important;
  padding: 9px !important;

  background:
    linear-gradient(
      rgba(255,255,255,.32),
      rgba(255,255,255,.32)
    ),
    url("/images/patterns/green-gingham.jpg")
    center / 190px auto repeat !important;
}

body.home-page .stardew-junimo {
  display: block !important;
  width: 84px !important;
  height: 84px !important;
  object-fit: contain !important;

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

  image-rendering: pixelated;
}

body.home-page .stardew-status {
  margin-top: 5px !important;
  padding: 3px 7px !important;

  color: #607552 !important;
  background: rgba(255,255,255,.82) !important;

  border: 1px solid #9bc78b !important;
  border-radius: 1px !important;

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

body.home-page .stardew-panel::before,
body.home-page .stardew-panel::after {
  content: "";
  position: absolute;
  z-index: 2;

  width: 34px;
  height: 34px;

  background:
    url("/images/icons/pixel-clover.png")
    center / contain no-repeat;

  pointer-events: none;
}

body.home-page .stardew-panel::before {
  left: 4px;
  bottom: 5px;
}

body.home-page .stardew-panel::after {
  right: 4px;
  top: 31px;
  transform: scale(.7);
}

/* ---------------------------------------------------------
   SPECIAL-PAGE CARDS
--------------------------------------------------------- */

body.home-page .special-page-card {
  position: relative !important;
  overflow: hidden !important;

  min-height: 102px !important;
  padding: 12px 10px 9px !important;

  border: 1px solid #d5a7c3 !important;
  border-radius: 2px !important;

  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.96),
    inset -1px -1px 0 rgba(177,132,162,.18) !important;
}

/* Remove the plain text star when a real decoration is used */
body.home-page .special-page-card .special-star {
  opacity: .28 !important;
}

/* Shared decorative image */
body.home-page .special-page-card::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 7px;

  width: 43px;
  height: 43px;

  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;

  pointer-events: none;
}

/* Exam page: clover */
body.home-page .special-page-card:nth-child(1)::before {
  background-image:
    url("/images/icons/pixel-clover.png");
}

/* 6M letter: envelope */
body.home-page .special-page-card:nth-child(2)::before {
  width: 48px;
  height: 42px;

  background-image:
    url("/images/icons/pixel-envelope.png");
}

/* Aitai: pink heart */
body.home-page .special-page-card:nth-child(3)::before {
  background-image:
    url("/images/icons/pink-pixel-heart.png");
}

/* Tiny top-right stars */
body.home-page .special-page-card::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 5px;

  width: 35px;
  height: 28px;

  background:
    url("/images/icons/pixel-stars.png")
    center / contain no-repeat;

  pointer-events: none;
}

/* 6M card gets a slightly more letter-like background */
body.home-page .special-page-card:nth-child(2) {
  background:
    linear-gradient(
      rgba(255,255,255,.70),
      rgba(255,255,255,.70)
    ),
    url("/images/patterns/pink-sage-classic-plaid.jpg")
    center / 230px auto repeat !important;
}

/* ---------------------------------------------------------
   FOOD SECTION
--------------------------------------------------------- */

body.home-page .food-panel {
  position: relative !important;
  overflow: hidden !important;
}

body.home-page .food-grid {
  position: relative !important;
  padding-top: 12px !important;
}

/* Pink bow-chain decorative divider */
body.home-page .food-grid::before {
  content: "";
  position: absolute;
  z-index: 3;
  left: 7px;
  right: 7px;
  top: 0;

  height: 17px;

  background:
    url("/images/icons/pink-bow-divider.png")
    center top / auto 17px repeat-x;

  pointer-events: none;
}

body.home-page .food-card {
  position: relative !important;
  overflow: hidden !important;

  min-height: 128px !important;
  padding: 13px 7px 7px !important;

  border: 1px solid #e0afca !important;
  border-radius: 2px !important;
}

/* Little pixel decoration in the corner of each food card */
body.home-page .food-card::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 4px;

  width: 25px;
  height: 25px;

  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;

  pointer-events: none;
}

body.home-page .food-card:nth-child(1)::after {
  background-image:
    url("/images/icons/pink-dessert.png");
}

body.home-page .food-card:nth-child(2)::after {
  background-image:
    url("/images/icons/blue-lollipop.png");
}

body.home-page .food-card:nth-child(3)::after {
  background-image:
    url("/images/icons/pink-pixel-bow.png");
}

/* Keep existing food icons prominent */
body.home-page .pixel-food-icon {
  width: 72px !important;
  height: 72px !important;
  margin: 3px auto 5px !important;
}

/* ---------------------------------------------------------
   PHOTO PANEL DECORATIONS
--------------------------------------------------------- */

body.home-page .photo-panel {
  position: relative !important;
  overflow: hidden !important;
}

body.home-page .photo-panel::before {
  content: "";
  position: absolute;
  z-index: 4;
  left: 4px;
  top: 28px;

  width: 47px;
  height: 40px;

  background:
    url("/images/icons/blue-wings.png")
    center / contain no-repeat;

  pointer-events: none;
}

body.home-page .photo-panel::after {
  content: "";
  position: absolute;
  z-index: 4;
  right: 5px;
  top: 29px;

  width: 48px;
  height: 37px;

  background:
    url("/images/icons/cloud-stars.png")
    center / contain no-repeat;

  pointer-events: none;
}

/* ---------------------------------------------------------
   NAVIGATION + PROFILE DECORATIONS
--------------------------------------------------------- */

body.home-page .nav-panel {
  position: relative !important;
}

body.home-page .nav-panel::after {
  content: "";
  position: absolute;
  right: 4px;
  bottom: 4px;

  width: 30px;
  height: 30px;

  background:
    url("/images/icons/pink-pixel-bow.png")
    center / contain no-repeat;

  pointer-events: none;
}

body.home-page .profile-panel {
  position: relative !important;
}

body.home-page .profile-panel::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 31px;

  width: 30px;
  height: 30px;

  background:
    url("/images/icons/blue-pixel-hearts.png")
    center / contain no-repeat;

  pointer-events: none;
}

/* ---------------------------------------------------------
   BANNER / DATING BADGE DECORATION
--------------------------------------------------------- */

body.home-page .dating-badge {
  position: absolute !important;
}

body.home-page .dating-badge::after {
  content: "";
  position: absolute;
  right: -13px;
  bottom: -13px;

  width: 35px;
  height: 35px;

  background:
    url("/images/icons/pixel-stars.png")
    center / contain no-repeat;

  pointer-events: none;
}

/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media (max-width: 760px) {
  body.home-page .retro-home {
    width: calc(100% - 20px) !important;
    margin: 10px auto 24px !important;
  }

  body.home-page .special-page-card::before {
    width: 34px;
    height: 34px;
  }
}