body {
  margin: 0;
  min-height: 100vh;

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

  background: #3a6ea5;
  background-image:url('https://porcelainpills.neocities.org/me/background.jpg');
  font-family: Tahoma, Verdana, sans-serif;
}

.xp-wrapper {
  width: min(900px, 90vw);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.start-back {
  align-self: flex-end;
}

/* Window */

.xp-window {
  width: min(900px, 90vw);
  height: min(700px, 85vh);
  background: #ece9d8;
  border: 1px solid #003c74;
  border-radius: 8px;
  box-shadow:
    0 0 0 1px #7aa7ff,
    4px 4px 15px rgba(0,0,0,0.4);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Title Bar */

.xp-titlebar {
  height: 30px;
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 6px;
  color: white;
  font-weight: bold;
  background:
    linear-gradient(
      to bottom,
      #0997ff 0%,
      #0053ee 8%,
      #0050ee 40%,
      #0066ff 88%,
      #003dd7 100%
    );
}

summary {
    cursor: pointer;
}

/* Window Buttons */

.xp-buttons {
  display: flex;
  gap: 2px;
}

.xp-buttons button {
  width: 22px;
  height: 22px;

  border: 1px solid #ffffff;

  background: linear-gradient(
    to bottom,
    #6cb6ff,
    #2d79ff
  );

  color: white;
  font-weight: bold;

  cursor: pointer;
}


/* Content */
.xp-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden; 
  padding: 16px 16px 32px 16px;
  background: #FAFAFA;
  border-top: 1px solid #7da2ce;
  display: flex;
  gap: 16px;
  box-sizing: border-box;
}

.hover-img {
  position: relative;
  display: inline-block;
  color: #003399;
  cursor: help;
}

/* popup container */
.popup {
  position: absolute;
  bottom: 120%;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

/* image styling */
.popup img {
  width: 200px;
  display: block;
  border: 1px solid #7da2ce;
  background: white;
  padding: 3px;
  box-shadow: 2px 2px 10px rgba(0,0,0,0.3);
}

/* desktop hover */
.hover-img:hover .popup {
  opacity: 1;
  visibility: visible;
}


/* LEFT: text column */
.text-content {
  flex: 0 0 58%;
  max-width: 58%;
  min-width: 0;
}

.stamp-column {
  flex: 0 0 40%;
  max-width: 40%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}


.stamp-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  min-width: 0;
  justify-content: flex-start;
  align-content: flex-start;
   padding-bottom: 24px;
}

/* stamps */
.stamp-column img {
  width: 99px;
  height: 56px;
  display: block;
  padding: 2px;
  box-sizing: border-box;
  image-rendering: auto;
}

/* MOBILE STACK */
@media (max-width: 768px) {
  .xp-content {
    flex-direction: column;
  }

  .text-content,
  .stamp-column {
    flex: 0 0 auto;
    max-width: 100%;
  }

  .stamp-column {
    justify-content: flex-start;
  }

  .popup {
    display: none;
  }
}



.xp-back {
  display: inline-block;
  border: 1px solid black;
  padding: 3px 15px;
  color: #000;
  text-decoration: none;
  font-family: Tahoma, sans-serif;
  font-size: 12px;
  border-radius: 3px;
  background: linear-gradient(
    to bottom,
    #ffffff 0%,
    #f4f2ea 50%,
    #ece9d8 100%
  );

  cursor: pointer;
}

/* Hover / focus */
.xp-back:hover,
.xp-back:focus {
  outline: none;
  border: 1px solid #B9D0F0;
}

/* Pressed state */
.xp-back:active {
  background: linear-gradient(
    to bottom,
    #dad3c9 0%,
    #e7e0d8 6%,
    #f8f3ef 18%,
    #f7f3f0 53%,
    #f8f7f5 59%,
    #fbf9fa 82%,
    #fffdfe 88%,
    #ffffff 94%,
    #f6f6f6 100%
  );
}