:root{
  --neo-blue:#8fc9ea;
  --neo-blue-deep:#6f9fca;
  --neo-pink:#efb4cf;
  --neo-pink-deep:#d88daf;
  --neo-lav:#cbb5ea;
  --neo-lav-deep:#9e88c4;
  --neo-yellow:#f4ecb0;
  --neo-green:#d8efc5;
  --neo-cream:#fffdfd;

  --pattern-blue-gingham:url("/images/patterns/blue-gingham.png");
  --pattern-green-gingham:url("/images/patterns/green-gingham.png");
  --pattern-lavender-stripe:url("/images/patterns/lavender-stripe.png");
  --pattern-yellow-stars:url("/images/patterns/yellow-stars.png");
  --pattern-lavender-polka:url("/images/patterns/lavender-polka.png");
  --pattern-orange-gingham:url("/images/patterns/orange-gingham.png");
  --pattern-purple-stars:url("/images/patterns/purple-stars.png");
}

html, body{
  background:
    #f8fbff
    var(--pattern-blue-gingham)
    repeat
    center top !important;
}

body{
  color:#657694;
}

/* OUTER FRAME */
.retro-home{
  max-width: 1260px !important;
  margin: 24px auto 32px !important;
  padding: 14px !important;
  background:
    linear-gradient(rgba(255,255,255,.87), rgba(255,255,255,.87)),
    var(--pattern-purple-stars) repeat center top !important;
  border: 1px solid var(--neo-blue) !important;
  box-shadow:
    0 0 0 3px rgba(255,255,255,.92),
    0 0 0 4px var(--neo-blue),
    0 0 0 6px #f3c1d8 !important;
  border-radius: 8px !important;
}

.retro-grid{
  gap: 12px !important;
}

.retro-box{
  position: relative;
  overflow: hidden;
  border: 1px solid var(--neo-blue) !important;
  border-radius: 6px !important;
  background:
    linear-gradient(rgba(255,255,255,.80), rgba(255,255,255,.80)) !important;
  box-shadow:
    inset 0 0 0 1px #ffffff,
    0 0 0 1px rgba(239,180,207,.9) !important;
}

.retro-title{
  border-bottom: 1px solid rgba(143,201,234,.9) !important;
  color:#647698 !important;
  font-weight: 900 !important;
  letter-spacing: .02em;
}

/* HEADER / BANNER */
.retro-banner{
  border: 1px solid var(--neo-blue) !important;
  box-shadow:
    inset 0 0 0 1px #fff,
    0 0 0 1px rgba(239,180,207,.9) !important;
}

/* Make sections feel more different from each other */
.profile-panel{
  background:
    linear-gradient(rgba(255,255,255,.80), rgba(255,255,255,.80)),
    var(--pattern-lavender-stripe) repeat center top !important;
}
.profile-panel .retro-title{
  background:
    linear-gradient(180deg,#ffe8f3 0%,#f5d3e4 100%) !important;
}

.nav-panel{
  background:
    linear-gradient(rgba(255,255,255,.84), rgba(255,255,255,.84)),
    var(--pattern-blue-gingham) repeat center top !important;
}
.nav-panel .retro-title{
  background:
    linear-gradient(180deg,#dff1ff 0%,#c8e7fb 100%) !important;
}

.boba-side-panel{
  background:
    linear-gradient(rgba(255,255,255,.84), rgba(255,255,255,.84)),
    var(--pattern-yellow-stars) repeat center top !important;
}
.boba-side-panel .retro-title{
  background:
    linear-gradient(180deg,#fff1b6 0%,#f4e29a 100%) !important;
}

.photo-panel{
  background:
    linear-gradient(rgba(255,255,255,.72), rgba(255,255,255,.72)),
    var(--pattern-green-gingham) repeat center top !important;
}
.photo-panel .retro-title{
  background:
    linear-gradient(180deg,#e8f7de 0%,#d8efc5 100%) !important;
}

/* 이거몰까요~ should not look like profile/trips */
.special-panel{
  background:
    linear-gradient(rgba(255,255,255,.78), rgba(255,255,255,.78)),
    var(--pattern-purple-stars) repeat center top !important;
}
.special-panel .retro-title{
  background:
    linear-gradient(180deg,#e8efff 0%,#d6e3ff 100%) !important;
}
.special-panel::before{
  content:"";
  position:absolute;
  top:8px;
  right:12px;
  width:56px;
  height:34px;
  background:url("/images/icons/stars-duo.png") center/contain no-repeat;
  pointer-events:none;
  opacity:.95;
}
.special-panel::after{
  content:"";
  position:absolute;
  left:10px;
  bottom:10px;
  width:42px;
  height:42px;
  background:url("/images/icons/clover-green.png") center/contain no-repeat;
  pointer-events:none;
  opacity:.95;
}

.food-panel{
  background:
    linear-gradient(rgba(255,255,255,.84), rgba(255,255,255,.84)),
    var(--pattern-orange-gingham) repeat center top !important;
}
.food-panel .retro-title{
  background:
    linear-gradient(180deg,#fff0b0 0%,#f6e39a 100%) !important;
}
.food-panel::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:32px;
  height:16px;
  background:url("/images/icons/bow-pink.png") center top / auto 16px repeat-x;
  pointer-events:none;
  opacity:.85;
}

.update-panel{
  background:
    linear-gradient(rgba(255,255,255,.80), rgba(255,255,255,.80)),
    var(--pattern-green-gingham) repeat center top !important;
}
.update-panel .retro-title{
  background:
    linear-gradient(180deg,#e5f4d9 0%,#d0eabb 100%) !important;
}

.trip-panel{
  background:
    linear-gradient(rgba(255,255,255,.78), rgba(255,255,255,.78)),
    var(--pattern-lavender-polka) repeat center top !important;
}
.trip-panel .retro-title{
  background:
    linear-gradient(180deg,#ece2ff 0%,#ddcef7 100%) !important;
}

.world-cup-panel{
  background:
    linear-gradient(rgba(255,255,255,.82), rgba(255,255,255,.82)),
    var(--pattern-yellow-stars) repeat center top !important;
}
.world-cup-panel .retro-title{
  background:
    linear-gradient(180deg,#fff0af 0%,#f7e39a 100%) !important;
}

.boba-right-panel{
  background:
    linear-gradient(rgba(255,255,255,.82), rgba(255,255,255,.82)),
    var(--pattern-green-gingham) repeat center top !important;
}
.boba-right-panel .retro-title{
  background:
    linear-gradient(180deg,#e5f6dd 0%,#d0ebc0 100%) !important;
}

/* SPECIAL PAGE CARDS - make each one feel distinct */
.special-page-card{
  position: relative;
  border: 1px solid rgba(232,165,198,.9) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.9) !important;
}

.special-page-card:nth-child(1){
  background:
    linear-gradient(rgba(255,255,255,.84), rgba(255,255,255,.84)),
    var(--pattern-yellow-stars) repeat center top !important;
}
.special-page-card:nth-child(2){
  background:
    linear-gradient(rgba(255,255,255,.84), rgba(255,255,255,.84)),
    var(--pattern-lavender-stripe) repeat center top !important;
}
.special-page-card:nth-child(3){
  background:
    linear-gradient(rgba(255,255,255,.84), rgba(255,255,255,.84)),
    var(--pattern-lavender-polka) repeat center top !important;
}

/* FOOD CARDS */
.food-card{
  position: relative;
  min-height: 210px !important;
  border: 1px solid rgba(232,165,198,.9) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.9) !important;
  padding-top: 18px !important;
}
.food-card:nth-child(1)::after{
  content:"";
  position:absolute;
  top:10px;
  right:12px;
  width:24px;
  height:24px;
  background:url("/images/icons/cupcake-pink.png") center/contain no-repeat;
  opacity:.9;
}
.food-card:nth-child(2)::after{
  content:"";
  position:absolute;
  top:10px;
  right:12px;
  width:24px;
  height:24px;
  background:url("/images/icons/lollipop-bluepink.png") center/contain no-repeat;
  opacity:.9;
}
.food-card:nth-child(3)::after{
  content:"";
  position:absolute;
  top:10px;
  right:12px;
  width:24px;
  height:24px;
  background:url("/images/icons/bow-pink.png") center/contain no-repeat;
  opacity:.9;
}

.food-icon-holder,
.trip-icon,
.special-icon-holder{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* TRANSPARENT PNG ICONS */
.trip-icon img,
.food-icon-holder img,
.special-icon-holder img,
.panel-sticker img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.trip-icon{
  width:84px !important;
  height:84px !important;
  margin: 0 10px 0 0 !important;
  display:flex;
  align-items:center;
  justify-content:center;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
}

.trip-icon img{
  max-width:84px !important;
  max-height:84px !important;
}

/* TRIP BLOCKS - more neocities, less plain */
.trip-row{
  display:grid !important;
  grid-template-columns: 88px 1fr auto !important;
  align-items:center !important;
  gap:12px !important;
  min-height: 108px !important;
  padding: 12px 14px !important;
  margin: 10px !important;
  border: 1px solid #caaae7 !important;
  box-shadow: inset 0 0 0 1px #fff !important;
  background:
    linear-gradient(rgba(255,255,255,.82), rgba(255,255,255,.82)) !important;
}

.trip-row:nth-child(1){
  background:
    linear-gradient(rgba(255,255,255,.82), rgba(255,255,255,.82)),
    var(--pattern-green-gingham) repeat center top !important;
}
.trip-row:nth-child(2){
  background:
    linear-gradient(rgba(255,255,255,.82), rgba(255,255,255,.82)),
    var(--pattern-blue-gingham) repeat center top !important;
}
.trip-row:nth-child(3){
  background:
    linear-gradient(rgba(255,255,255,.82), rgba(255,255,255,.82)),
    var(--pattern-lavender-stripe) repeat center top !important;
}
.trip-row:nth-child(4){
  background:
    linear-gradient(rgba(255,255,255,.82), rgba(255,255,255,.82)),
    var(--pattern-purple-stars) repeat center top !important;
}

.trip-info{
  display:flex !important;
  flex-direction:column !important;
  gap:6px !important;
}

.trip-info strong,
.trip-info .trip-name{
  color:#6b7899 !important;
  font-size: 1.05rem !important;
  line-height:1.15 !important;
}

.trip-info span,
.trip-info .trip-dday{
  justify-self:end;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-width: 98px !important;
  padding: 10px 12px !important;
  background:
    linear-gradient(180deg,#fff8ff 0%,#f1e8ff 100%) !important;
  color:#7a68aa !important;
  border:1px solid #bda0e4 !important;
  border-radius:0 !important;
  box-shadow:
    inset 1px 1px 0 #fff,
    inset -1px -1px 0 rgba(130,92,170,.18) !important;
  font-weight:900 !important;
  font-size: 1rem !important;
}

/* fix bad text wrapping in trips */
.trip-info{
  min-width:0;
}
.trip-info strong,
.trip-info .trip-name{
  word-break: keep-all;
}

/* MAKE CENTER PANELS A LITTLE TIGHTER */
.photo-panel .main-photo-grid,
.special-panel .special-page-grid,
.food-panel .food-grid,
.update-panel .update-photo-grid{
  gap: 10px !important;
}

.photo-panel,
.special-panel,
.food-panel,
.update-panel{
  padding-bottom: 10px !important;
}

/* RIGHT SIDE SOCCER BALL / TIME / CALENDAR vibe */
.world-cup-panel + .retro-box::before{
  content:"";
  position:absolute;
  top:-64px;
  left:50%;
  transform:translateX(-50%);
  width:64px;
  height:64px;
  background:url("/images/icons/soccer-ball.png") center/contain no-repeat;
  pointer-events:none;
}

/* white box removal for any icon wrappers */
img[src$=".png"]{
  background: transparent !important;
}

.trip-icon,
.food-icon-holder,
.profile-photo,
.special-page-card .special-star{
  background: transparent !important;
}

/* remove accidental white square wrappers */
.trip-icon *,
.food-icon-holder *,
.profile-photo *,
.special-page-card img{
  background: transparent !important;
}

/* better icon sizing */
.food-icon-holder{
  width: 116px;
  height: 116px;
  margin: 0 auto 10px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.food-icon-holder img{
  max-width: 112px;
  max-height: 112px;
}

/* if old text placeholders remain */
.pixel-food-icon{
  display:none !important;
}

/* profile / photo decorative stickers */
.profile-panel::after{
  content:"";
  position:absolute;
  top:10px;
  right:10px;
  width:38px;
  height:38px;
  background:url("/images/icons/heart-pink.png") center/contain no-repeat;
  opacity:.92;
  pointer-events:none;
}
.photo-panel::before{
  content:"";
  position:absolute;
  top:44px;
  right:16px;
  width:52px;
  height:34px;
  background:url("/images/icons/cloud-stars.png") center/contain no-repeat;
  opacity:.92;
  pointer-events:none;
}

/* titles slightly more varied */
.pink-title{
  background: linear-gradient(180deg,#ffe4f1 0%,#f5cadf 100%) !important;
}
.blue-title{
  background: linear-gradient(180deg,#dff1ff 0%,#c7e5fb 100%) !important;
}
.yellow-title{
  background: linear-gradient(180deg,#fff1b3 0%,#f6e39a 100%) !important;
}
.green-title{
  background: linear-gradient(180deg,#ebf6df 0%,#d7ecc3 100%) !important;
}
.lavender-title{
  background: linear-gradient(180deg,#efe4ff 0%,#ddcff7 100%) !important;
}

/* keep overall neocities pastel border vibe */
.retro-box,
.retro-banner,
.special-page-card,
.food-card,
.trip-row{
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.95),
    0 0 0 1px rgba(239,180,207,.95) !important;
}