/* C: one neutral Paint-style frame for every small window. */
#couple-corner .cc-window {
  border: 1px solid #7f8983;
  padding: 3px;
  background: var(--cc-paper);
  box-shadow: inset 1px 1px #fff, 2px 2px 0 #bbc2b9;
}
#couple-corner .cc-window.cc-window.cc-window > .cc-bar {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 32px;
  border: 1px solid #aeb8ae;
  border-bottom-color: #8f9a91;
  background: linear-gradient(#fefefa, #dadfd9);
  box-shadow: inset 1px 1px #fff, inset -1px -1px #c5cdc3;
  color: #3b4b42;
  transition: filter .18s ease;
}
#couple-corner .cc-window:hover > .cc-bar { filter: saturate(1.07); }
#couple-corner .cc-window > .cc-bar::after {
  content: '';
  position: absolute;
  left: 35px;
  bottom: 1px;
  width: 54px;
  height: 3px;
  background: linear-gradient(90deg, #f4b6cc 0 20%, #a9c8ec 20% 40%, #bfd9a1 40% 60%, #f6c78a 60% 80%, #c4b0e4 80%);
  pointer-events: none;
}
#couple-corner .cc-window > .cc-bar > span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-weight: 600;
  text-shadow: 1px 1px #fff;
}
#couple-corner .cc-window > .cc-bar > span:first-child::before {
  content: '';
  display: inline-block;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  background: url('assets/cd-y2k.png') center / 44px 44px no-repeat;
  image-rendering: pixelated;
}
#couple-corner .cc-window > .cc-bar > .cc-min {
  width: 21px;
  height: 19px;
  border: 1px solid #8c978e;
  background: linear-gradient(#fff, #e2e8df);
  color: #445b49;
  box-shadow: inset 1px 1px #fff, 1px 1px #aab6ab;
  font: 700 12px/1 var(--cc-pixel);
}
#couple-corner .cc-window > .cc-bar > .cc-min:hover { background: #f9dcea; }
#couple-corner .cc-window > .cc-bar > .cc-min:active { box-shadow: inset 1px 1px #aab6ab; }
#couple-corner .cc-window.cc-collapsed > .cc-body { display: none !important; }

/* Photo lightbox uses the same window chrome. */
#couple-corner .cc-lightbox {
  border: 1px solid #7f8983;
  box-shadow: inset 1px 1px #fff, 2px 2px 0 #bbc2b9;
}
#couple-corner .cc-lightbox > .cc-bar {
  border: 1px solid #aeb8ae;
  border-bottom-color: #8f9a91;
  background: linear-gradient(#fefefa, #dadfd9);
  color: #3b4b42;
}
#couple-corner .cc-lightbox > .cc-bar > span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
#couple-corner .cc-lightbox > .cc-bar > span:first-child::before {
  content: '';
  display: inline-block;
  width: 22px;
  height: 22px;
  background: url('assets/cd-y2k.png') center / 44px 44px no-repeat;
  image-rendering: pixelated;
}

/* HOME uses the same frame, with a slightly larger disc and save indicator. */
#couple-corner .cc-hero {
  border: 1px solid #7f8983;
  box-shadow: 2px 2px 0 #bbc2b9;
}
#couple-corner .cc-hero .cc-hero-bar {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 39px;
  padding: 5px 9px;
  border: 1px solid #aeb8ae;
  border-bottom-color: #8f9a91;
  background: linear-gradient(#fefefa, #dadfd9);
  box-shadow: inset 1px 1px #fff, inset -1px -1px #c5cdc3;
  color: #3b4b42;
}
#couple-corner .cc-hero .cc-hero-bar::after {
  content: '■ ■ ■';
  position: absolute;
  right: 135px;
  top: 50%;
  width: auto;
  height: auto;
  transform: translateY(-50%);
  background: none;
  color: #e9a1bd;
  font: 12px/1 var(--cc-pixel);
  letter-spacing: 3px;
  pointer-events: none;
}
#couple-corner .cc-hero-bar-title,
#couple-corner .cc-hero-bar-status { position: relative; z-index: 1; display: inline-flex; align-items: center; }
#couple-corner .cc-hero-bar-title {
  gap: 8px;
  font: 16px/1 var(--cc-pixel);
  letter-spacing: .5px;
  text-shadow: 1px 1px #fff;
}
#couple-corner .cc-hero-cd {
  display: inline-block;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  background: url('assets/cd-y2k.png') center / 48px 48px no-repeat;
  image-rendering: pixelated;
}
#couple-corner .cc-hero-bar-status {
  gap: 5px;
  padding: 2px 5px;
  border: 1px solid #8f9a91;
  background: var(--cc-paper);
  box-shadow: 1px 1px 0 #bbc2b9;
  color: var(--cc-accent);
  font: 10px/1 var(--cc-pixel);
  white-space: nowrap;
}
#couple-corner .cc-hero-spark { color: var(--cc-accent); font-size: 13px; }
#couple-corner .cc-hero-led {
  width: 6px;
  height: 6px;
  background: var(--cc-accent);
  box-shadow: 0 0 0 1px var(--cc-paper), 0 0 0 2px var(--cc-accent);
}

/* The original clover-sky image is confined to the name bar. */
#couple-corner .cc-top {
  min-height: 45px;
  border-bottom: 2px solid hsl(181 25% 42% / .8);
  background-color: #89abc7;
  background-image: linear-gradient(hsl(0 0% 100% / .05), hsl(207 31% 46% / .12)), url('assets/clover-sky.webp');
  background-size: auto, cover;
  background-position: center, center 18%;
  background-repeat: no-repeat;
  color: #234a49;
  box-shadow: inset 0 1px hsl(0 0% 100% / .7), inset 0 -2px hsl(50 55% 93% / .65);
}
#couple-corner .cc-top-title {
  gap: 5px;
  padding: 2px 8px 2px 2px;
  border: 1px solid hsl(0 0% 100% / .8);
  background: hsl(65 58% 97% / .76);
  box-shadow: 2px 2px 0 hsl(199 29% 39% / .44);
  text-shadow: 1px 1px #fff;
}
#couple-corner .cc-top-meteor {
  display: inline-block;
  flex: 0 0 44px;
  width: 44px;
  height: 24px;
  background: url('assets/shooting-star-y2k.png') center / 84px 42px no-repeat;
  image-rendering: pixelated;
}
#couple-corner .cc-top .cc-user-btn { box-shadow: 1px 1px 0 hsl(190 28% 30% / .55); }

/* The bottom bar mirrors the clover-sky name bar, with one centered label. */
#couple-corner .cc-statusbar {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 45px;
  padding: 7px 10px;
  border-top: 2px solid hsl(181 25% 42% / .8);
  background-color: #89abc7;
  background-image: linear-gradient(hsl(0 0% 100% / .05), hsl(207 31% 46% / .12)), url('assets/clover-sky.webp');
  background-size: auto, cover;
  background-position: center, center 78%;
  background-repeat: no-repeat;
  box-shadow: inset 0 1px hsl(50 55% 93% / .65), inset 0 -1px hsl(0 0% 100% / .7);
  font: 13px/1.4 var(--cc-pixel);
  margin: auto 0 0;
}
#couple-corner .cc-statusbar span {
  padding: 2px 10px;
  border: 1px solid hsl(0 0% 100% / .8);
  background: hsl(65 58% 97% / .76);
  box-shadow: 2px 2px 0 hsl(199 29% 39% / .44);
  color: #234a49;
  text-shadow: 1px 1px #fff;
}

/* Keep window text legible when the site's dark setting is enabled. */
#couple-corner[data-dark=true] .cc-window {
  border-color: #69776f;
  box-shadow: inset 1px 1px #abb7ab, 2px 2px 0 #35453c;
}
#couple-corner[data-dark=true] .cc-window.cc-window.cc-window > .cc-bar,
#couple-corner[data-dark=true] .cc-hero .cc-hero-bar {
  border-color: #7b8b80;
  background: linear-gradient(#677b6e, #435c4d);
  box-shadow: inset 1px 1px #8fa391, inset -1px -1px #304236;
  color: #f6fff4;
}
#couple-corner[data-dark=true] .cc-window > .cc-bar > span:first-child,
#couple-corner[data-dark=true] .cc-hero-bar-title { text-shadow: 1px 1px #2c4132; }
#couple-corner[data-dark=true] .cc-window > .cc-bar > .cc-min {
  border-color: #a6b4a8;
  background: linear-gradient(#819784, #536d5b);
  color: #fff;
  box-shadow: inset 1px 1px #afc3b0, 1px 1px #26392c;
}
#couple-corner[data-dark=true] .cc-hero { border-color: #69776f; box-shadow: 2px 2px 0 #35453c; }
#couple-corner[data-dark=true] .cc-lightbox { border-color: #69776f; box-shadow: 2px 2px 0 #35453c; }
#couple-corner[data-dark=true] .cc-lightbox > .cc-bar {
  border-color: #7b8b80;
  background: linear-gradient(#677b6e, #435c4d);
  color: #f6fff4;
}

@media(max-width:600px) {
  #couple-corner .cc-window.cc-window.cc-window > .cc-bar { min-height: 27px; }
  #couple-corner .cc-window > .cc-bar > span:first-child::before { flex-basis: 18px; width: 18px; height: 18px; background-size: 38px 38px; }
  #couple-corner .cc-top-title { padding-right: 5px; }
  #couple-corner .cc-top-meteor { flex-basis: 35px; width: 35px; background-size: 70px 35px; }
  #couple-corner .cc-hero .cc-hero-bar::after { display: none; }
  #couple-corner .cc-statusbar { font-size: 11px; padding: 6px; }
}
@media(prefers-reduced-motion:reduce) { #couple-corner .cc-window > .cc-bar { transition: none; } }