/* Keep Three.js background behind */
#threejs-background {
  position: fixed;
  inset: 0;
  z-index: 0;
}

/* Centering shell */
#menu-overlay {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 10;
  padding: clamp(8px, 3vmin, 32px);
}

/* ===== Win98 Window ===== */
:root {
  --win98-gray: #c0c0c0;
  --win98-dark: #808080;
  --win98-darker: #404040;
  --win98-light: #ffffff;
  --win98-blue1: #000080; /* active titlebar navy */
  --win98-blue2: #1084d0; /* light gradient end */
  --win98-shadow: rgba(0, 0, 0, 0.45);
  --win98-font: Tahoma, "MS Sans Serif", "Microsoft Sans Serif", system-ui, sans-serif;
}

.win98-window {
  font-family: var(--win98-font);
  color: #000;
  background: var(--win98-gray);
  /* Responsive width/height with sensible limits */
  width: clamp(280px, 90vw, 720px);
  max-height: clamp(320px, 80vh, 820px);
  /* Classic 3D frame: light on top/left, dark on bottom/right */
  border: 2px solid;
  border-color: var(--win98-light) var(--win98-darker) var(--win98-darker) var(--win98-light);
  /* Inner bevel */
  box-shadow:
    inset 1px 1px 0 0 var(--win98-dark),
    inset -1px -1px 0 0 var(--win98-light),
    8px 10px 0 -6px rgba(0,0,0,0), /* spacer */
    0 10px 28px var(--win98-shadow);
  overflow: hidden;
}

/* Title bar */
.win98-titlebar {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  color: #fff;
  /* Subtle gradient like active Win98 windows */
  background: linear-gradient(180deg, var(--win98-blue2), var(--win98-blue1));
  /* top inner line */
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
}

.win98-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: clamp(0.9rem, 2vmin, 1rem);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Tiny application icon block */
.win98-icon {
  width: 16px;
  height: 16px;
  background:
    linear-gradient(135deg, #fff, #d9d9d9);
  border: 1px solid #000;
  box-shadow:
    1px 1px 0 0 var(--win98-dark),
    -1px -1px 0 0 var(--win98-light);
}

/* Decorative window controls (non-interactive) */
.win98-controls {
  display: inline-flex;
  gap: 4px;
}

.ctl {
  width: 16px;
  height: 14px;
  display: inline-block;
  background: var(--win98-gray);
  border: 2px solid;
  border-color: var(--win98-light) var(--win98-darker) var(--win98-darker) var(--win98-light);
  box-shadow: inset 1px 1px 0 var(--win98-dark), inset -1px -1px 0 var(--win98-light);
}

/* glyphs */
.ctl-min { position: relative; }
.ctl-min::after {
  content: "";
  position: absolute; left: 3px; right: 3px; bottom: 2px;
  height: 2px; background: #000;
}

.ctl-max { position: relative; }
.ctl-max::after {
  content: "";
  position: absolute; inset: 2px 3px 4px 3px;
  border: 1px solid #000; background: #cfcfcf;
}

.ctl-close { position: relative; }
.ctl-close::before, .ctl-close::after {
  content: ""; position: absolute; left: 3px; right: 3px; top: 3px; bottom: 3px;
  background: linear-gradient(45deg, transparent 46%, #000 46%, #000 54%, transparent 54%),
              linear-gradient(-45deg, transparent 46%, #000 46%, #000 54%, transparent 54%);
}
.ctl.disabled { filter: grayscale(100%) contrast(80%); opacity: 0.6; }

/* Body area with sunken look */
.win98-body {
  padding: 8px;
  overflow: auto;
  max-height: calc(80vh - 46px); /* safety for small screens */
}

.win98-group {
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr;
}

/* Win98 buttons */
.win98-btn {
  font: 400 13px var(--win98-font);
  color: #000;
  background: var(--win98-gray);
  padding: 6px 10px;
  border: 2px solid;
  border-color: var(--win98-light) var(--win98-darker) var(--win98-darker) var(--win98-light);
  box-shadow: inset 1px 1px 0 var(--win98-dark), inset -1px -1px 0 var(--win98-light);
  cursor: pointer;
  text-align: left;

  /* make links look like Win98 buttons */
  text-decoration: none;
  display: inline-block;  /* ensures padding/border apply correctly to <a> */
}

.win98-btn:hover {
  background: #dcdcdc; /* subtle hover like Win98 buttons */
}


.win98-btn:active {
  /* pressed effect */
  border-color: var(--win98-darker) var(--win98-light) var(--win98-light) var(--win98-darker);
  box-shadow: inset -1px -1px 0 var(--win98-dark), inset 1px 1px 0 var(--win98-light);
}

/* Status line */
.win98-status {
  margin-top: 10px;
  padding: 6px;
  background: #fff;
  border: 2px solid;
  border-color: var(--win98-dark) var(--win98-light) var(--win98-light) var(--win98-dark);
  font-size: clamp(0.8rem, 1.8vmin, 0.9rem);
}

/* Small devices: give a bit more height and tighter paddings */
@media (max-width: 480px) {
  .win98-body { max-height: calc(86vh - 46px); }
}