/* ------------------------------------------------------------------
   Phase E.1 — desktop windowed layout.

   Adds two new windows (Solitaire background, Episodes chrome wrapper)
   and repositions the hero on desktop viewports (≥880px).
   Below 880px every desktop rule is reverted: Solitaire is hidden and
   the Episodes wrapper collapses to display:contents so today's
   flat-grid layout is byte-for-byte preserved on mobile.
   ------------------------------------------------------------------ */


/* --- Shared Win98 chrome (--w98-* vars are duplicated from index.html;
       worth extracting if a fourth file needs them) ----------------- */

.desktop-window {
  --w98-face: #c0c0c0;
  --w98-shadow: #808080;
  --w98-hilite: #ffffff;
  --w98-title: #000080;
  --w98-title-text: #ffffff;
  --w98-text: #000000;

  background: var(--w98-face);
  border: 2px solid var(--w98-hilite);
  box-shadow:
    inset -2px -2px 0 var(--w98-shadow),
    inset  2px  2px 0 var(--w98-hilite),
    2px 2px 0 #000;
  font-family: "MS Sans Serif", Tahoma, Verdana, Arial, sans-serif;
  color: var(--w98-text);
}

.dw-titlebar {
  background: var(--w98-title);
  color: var(--w98-title-text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px;
  font-weight: 700;
  font-size: 11px;            /* dialled down from 13px so 'Solitaire' /
                                  'Episodes' read as small chrome labels
                                  rather than headline text */
  user-select: none;
}

.dw-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dw-titlebar-controls {
  display: flex;
  gap: 6px;
}

.dw-ctrl {
  position: relative;
  width: 18px;
  height: 18px;
  background: var(--w98-face);
  border: 2px solid var(--w98-hilite);
  box-shadow:
    inset -2px -2px 0 var(--w98-shadow),
    inset  2px  2px 0 var(--w98-hilite);
}

/* Glyphs inside the titlebar buttons (minimize / maximize / close). */
.dw-titlebar-controls .dw-ctrl::after {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #000;
  line-height: 1;
}
.dw-titlebar-controls .dw-ctrl:nth-child(1)::after {
  content: '';
  /* underscore sitting at the bottom = Win98 minimize glyph */
  width: 7px;
  height: 2px;
  background: #000;
  align-self: flex-end;
  margin: 0 auto 2px;
}
.dw-titlebar-controls .dw-ctrl:nth-child(2)::after {
  /* hollow square = maximize */
  content: '';
  width: 8px;
  height: 7px;
  border: 1px solid #000;
  border-top-width: 2px;
}
.dw-titlebar-controls .dw-ctrl:nth-child(3)::after {
  content: '\00D7';   /* multiplication sign as the X */
  font-size: 13px;
}

/* Small program icon next to the title text. */
.dw-title {
  display: flex;
  align-items: center;
  gap: 5px;
}
.dw-title::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  flex: 0 0 14px;
}
.solitaire-window .dw-title::before {
  /* mini playing card with spade */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><rect x="2" y="1" width="10" height="12" fill="white" stroke="black"/><text x="7" y="11" font-family="serif" font-size="11" font-weight="bold" text-anchor="middle" fill="black">%E2%99%A0</text></svg>');
}
.episodes-window .dw-title::before {
  /* folder */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 12"><path d="M1 3 L5 3 L6 2 L13 2 L13 11 L1 11 Z" fill="%23e8c44a" stroke="black" stroke-width="0.5"/></svg>');
  height: 12px;
}

.dw-menubar {
  display: flex;
  gap: 14px;
  padding: 3px 10px;
  font-size: 12px;
  border-bottom: 1px solid var(--w98-shadow);
  user-select: none;
}

.dw-menu-item::first-letter {
  text-decoration: underline; /* Win98 Alt-shortcut hint */
}

/* --- Toolbar (between menubar and content) ------------------------- */

.dw-toolbar {
  display: flex;
  gap: 2px;
  padding: 3px 6px;
  background: var(--w98-face);
  border-top: 1px solid var(--w98-hilite);
  border-bottom: 1px solid var(--w98-shadow);
  user-select: none;
  align-items: center;
}

.dw-tool-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  font-size: 13px;
  background: var(--w98-face);
  border: 1px solid;
  border-color: var(--w98-hilite) var(--w98-shadow) var(--w98-shadow) var(--w98-hilite);
}

.dw-tool-sep {
  width: 0;
  height: 18px;
  border-left: 1px solid var(--w98-shadow);
  border-right: 1px solid var(--w98-hilite);
  margin: 0 4px;
}

.dw-content {
  padding: 8px;
  background: var(--w98-face);
  /* recessed/sunken bevel: dark on top+left, light on bottom+right
     (inverse of the raised window chrome above). Adds an inner border
     that reads as a Win98 "list view" / "client area" panel. */
  border-style: solid;
  border-width: 2px;
  border-color: var(--w98-shadow) var(--w98-hilite) var(--w98-hilite) var(--w98-shadow);
  margin: 3px;
}

/* --- Status bar (bottom of each window) ----------------------------- */

.dw-statusbar {
  display: flex;
  gap: 4px;
  padding: 3px 4px 4px;
  font-size: 11px;
  user-select: none;
  align-items: stretch;
  border-top: 1px solid var(--w98-hilite);
}

.dw-status-cell {
  flex: 1;
  padding: 1px 6px;
  border-style: solid;
  border-width: 1px;
  border-color: var(--w98-shadow) var(--w98-hilite) var(--w98-hilite) var(--w98-shadow);
}

.dw-status-grip {
  width: 14px;
  height: 14px;
  align-self: flex-end;
  /* three diagonal lines in the bottom-right — the Win98 sizing grip */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><path d="M0 14 L14 0" stroke="%23808080" stroke-width="1.5"/><path d="M5 14 L14 5" stroke="%23808080" stroke-width="1.5"/><path d="M10 14 L14 10" stroke="%23808080" stroke-width="1.5"/></svg>');
  background-repeat: no-repeat;
}

/* Solitaire green felt — placeholder until E.2 replaces with <video> */
.solitaire-felt {
  background: #008000;
  width: 100%;
  height: 100%;
  min-height: 200px;
}

/* --- Win98-style scrollbar inside Episodes' content area ----------
   WebKit only; Firefox gets a basic scrollbar-color treatment below. */
.episodes-window .dw-content::-webkit-scrollbar {
  width: 16px;
}
.episodes-window .dw-content::-webkit-scrollbar-track {
  background-color: var(--w98-face);
  background-image:
    repeating-linear-gradient(0deg,  #aaa 0 1px, transparent 1px 2px),
    repeating-linear-gradient(90deg, #aaa 0 1px, transparent 1px 2px);
}
.episodes-window .dw-content::-webkit-scrollbar-thumb {
  background: var(--w98-face);
  border: 2px solid;
  border-color: var(--w98-hilite) var(--w98-shadow) var(--w98-shadow) var(--w98-hilite);
  box-shadow: inset -1px -1px 0 var(--w98-shadow), inset 1px 1px 0 var(--w98-hilite);
}
.episodes-window .dw-content::-webkit-scrollbar-button {
  height: 16px;
  background-color: var(--w98-face);
  border: 2px solid;
  border-color: var(--w98-hilite) var(--w98-shadow) var(--w98-shadow) var(--w98-hilite);
  background-repeat: no-repeat;
  background-position: center;
}
.episodes-window .dw-content::-webkit-scrollbar-button:vertical:start:decrement {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 8"><path d="M5 1 L1 6 L9 6 Z" fill="black"/></svg>');
}
.episodes-window .dw-content::-webkit-scrollbar-button:vertical:end:increment {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 8"><path d="M5 7 L1 2 L9 2 Z" fill="black"/></svg>');
}
.episodes-window .dw-content::-webkit-scrollbar-button:vertical:start:increment,
.episodes-window .dw-content::-webkit-scrollbar-button:vertical:end:decrement {
  display: none;   /* hide the "double" buttons WebKit reserves */
}

/* Firefox fallback */
.episodes-window .dw-content {
  scrollbar-width: auto;
  scrollbar-color: var(--w98-face) #aaa;
}


/* --- Mobile (≤879px): hide the desktop sim entirely ---------------- */

@media (max-width: 879.98px) {
  .solitaire-window {
    display: none;
  }

  /* display:contents = the wrapper vanishes from layout; children
     (.episodes-grid) flow as if the wrapper weren't there. This is
     how the mobile path remains identical to today. */
  .episodes-window {
    display: contents;
  }
  .episodes-window .dw-titlebar,
  .episodes-window .dw-menubar {
    display: none;
  }
}


/* --- Desktop (≥880px): the windowed layout ------------------------- */

@media (min-width: 880px) {

  /* Make the document itself taller so the page has a vertical scroll.
     Bumped to 140vh to make room for the taller Episodes window below. */
  body {
    height: auto;
    min-height: 140vh;
  }

  /* Hero. Width: 60% of 760 (= 456) then ×1.10 ×1.15 = 577px.
     position:absolute so it scrolls with the page; the three windows
     keep fixed positions *relative to each other*. */
  .hero-wrap {
    position: absolute;
    top: 24px;
    left: 0;
    right: 0;
    z-index: 2;
    padding: 0 16px;
  }
  /* clamp(min, preferred, max) lets the hero scale with viewport between
     a floor and ceiling. 40vw hits ~577px at 1440 viewport (your full-
     screen tuning), shrinks gracefully on narrow windows (down to 420),
     and stops at 700 so it doesn't dominate ultra-wide screens. */
  .hero-wrap .hero-window {
    width: clamp(420px, 40vw, 700px);
  }
  .hero-wrap .hero-spin {
    aspect-ratio: 2.05 / 1;
    height: auto;
  }

  /* Solitaire — large background window. Width 72vw, shifted right
     (left:28vw flush with viewport's right edge). Pushed down so the
     hero sits mostly above Solitaire's body; top-left corner pokes out
     in the upper-left region, visible above Episodes and left of Hero. */
  .solitaire-window {
    position: absolute;
    left: calc(25vw - 20px);   /* 25vw base, shifted 20px further left */
    width: 72vw;
    top: 37vh;
    height: 62vh;              /* was top:37vh + bottom:1vh; switched to
                                  explicit height so absolute positioning
                                  doesn't get pinned to the (taller) body
                                  via the bottom anchor. */
    z-index: 0;
    display: flex;
    flex-direction: column;
  }
  .solitaire-window .dw-content {
    flex: 1;
    padding: 4px;
    display: flex;
  }

  /* Episodes — absolute, top:50vh, height 58vh. Bottom sits 85px below
     Solitaire's bottom (so the box physically overhangs Solitaire). At
     scroll 0 the overhang is mostly clipped by viewport bottom; scroll
     the page down to bring it into view. Cards inside still scroll
     internally via .dw-content's overflow-y:auto. */
  .episodes-window {
    position: absolute;
    left: 16px;
    top: 60vh;                          /* pulled down so it no longer
                                            overlaps the hero vertically */
    width: clamp(468px, 52vw, 910px);   /* +30% on every clamp value */
    height: 75vh;                       /* +29% from prior 58vh */
    z-index: 1;
    display: flex;
    flex-direction: column;
  }
  .episodes-window .dw-content {
    flex: 1;
    overflow-y: auto;          /* internal scroll when episodes overflow */
    padding: 10px;
  }

  /* Three-column picture-card grid inside the Episodes window. */
  .episodes-window .episodes-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
}