:root {
  --paper: #fffaf2;
  --ink: #3a2415;
  --ink-soft: #6b5138;
  --coral: #ff6b4a;
  --coral-deep: #d9472b;
  --screen-bg: linear-gradient(135deg, #2a3a6b 0%, #3d5a99 45%, #6f8fc7 100%);
  --screen-ink: #f4ecdd;
  --screen-ink-soft: #cdd7ef;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #1b1330;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

.stage {
  position: relative;
  /* Locks to the artwork's exact aspect ratio (2732:1535) and always fits
     fully within the viewport on both axes, so the image and the window
     zones below scale together as one unit at any window size. */
  width: min(100vw, calc(100vh * (2732 / 1535)));
  height: min(100vh, calc(100vw * (1535 / 2732)));
}

.background {
  display: block;
  width: 100%;
  height: 100%;
  user-select: none;
  pointer-events: none;
}

.window {
  position: absolute;
  display: block;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

.window:focus-visible .pick-card {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

/* left/top mark the CENTER of these zones (not the top-left corner), so they
   can be rotated in place to match the tilt of the object underneath.
   Selector specificity here is deliberately bumped (two classes) so it wins
   over the plain .window rule above. */
.window.window-rotated {
  transform: translate(-50%, -50%) rotate(var(--angle));
}

/* --- pick cards ------------------------------------------------------- */

.pick-card {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 10px rgba(30, 15, 5, 0.28);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.window:hover .pick-card {
  box-shadow: 0 4px 16px rgba(30, 15, 5, 0.4);
  transform: scale(1.015);
}

/* screen-style cards (monitor, phone): a little "live site" look with a
   browser-chrome bar, since these will eventually hold real embeds. */
.pick-card--screen {
  background: var(--screen-bg);
  color: var(--screen-ink);
}

.screen-chrome {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.3em 0.5em;
  background: rgba(0, 0, 0, 0.22);
}

.screen-chrome span {
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: rgba(244, 236, 221, 0.5);
  flex: 0 0 auto;
}

.screen-chrome span:first-child {
  background: #ff6b6b;
}

/* paper-style cards (pegboard note, boombox label): a warm postcard look. */
.pick-card--paper {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid rgba(58, 36, 21, 0.08);
}

/* preview-image cards: the resolved image fills the whole zone, no overlay
   -- a window is just a clean preview of the site, nothing rendered on top
   of it. Falls back to the plain card (solid background, no <img>) whenever
   previewImage is missing or fails to load -- see the img error handler in
   script.js. */
.pick-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Each window's screenshot is captured at a viewport roughly matching
     that zone's shape already (see WINDOW_SCREENSHOT_VIEWPORT in the
     generator), so cover-cropping should be minor -- but if any is needed,
     trim from the bottom, not the top: show the top of the page (logo,
     header, above the fold), never an arbitrary middle slice. */
  object-position: center top;
  display: block;
}

.pick-card--has-image .screen-chrome {
  position: relative;
  z-index: 1;
}

.pick-card--has-image.pick-card--paper {
  border-color: transparent;
}

/* empty / missing-data placeholder -- just the dashed outline, no copy */
.pick-card--empty {
  background: rgba(255, 255, 255, 0.55);
  border: 1.5px dashed rgba(58, 36, 21, 0.3);
  box-shadow: none;
}

/* The phone screen isn't a true rectangle in the artwork (it's drawn at a
   slight perspective skew, so a plain CSS rotate() never sits flush against
   all four edges) — clip the card to its actual quadrilateral (a safety-net
   boundary; phone-content below is already sized/rotated to closely match
   it). Corners measured from the artwork, expressed as % of this element's
   own box. */
.pick-card--phone {
  position: relative;
  clip-path: polygon(0% 51.67%, 74.01% 0%, 100% 51.87%, 24.17% 100%);
}

.phone-content {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 36%;
  height: 130%;
  /* A plain rotate() assumes a rectangle, but the screen is a skewed
     parallelogram in the artwork (its long edges and short edges aren't
     perpendicular) — this matrix() bakes in that skew directly, using the
     measured unit vectors along the screen's own width and length edges.
     Both the image (captured at a real phone aspect ratio -- see
     WINDOW_SCREENSHOT_VIEWPORT) and the chrome dots live inside this box, so
     they land at the phone's actual tilt together, instead of the image
     showing through the outer clip-path unrotated. */
  transform: translate(-50%, -50%) matrix(0.6640, 0.7478, -0.9306, 0.3660, 0, 0);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}