/* Pantone-inspired pastel palette */
:root {
  --peach-fuzz: #ffbe98;    /* PANTONE 13-1023 Peach Fuzz */
  --pale-dogwood: #edcdc2;  /* PANTONE 13-1404 Pale Dogwood */
  --lavender: #c9b8e0;      /* PANTONE 14-3812 Pastel Lilac */
  --cool-mint: #bfe3cf;     /* PANTONE 13-5414 Ice Green */
  --baby-blue: #b5d3e7;     /* PANTONE 14-4115 Cashmere Blue */
  --coral: #e0705a;
  --ink: #4a3f55;

  /* macOS Terminal, dark mode */
  --term-bg: #1e1e1e;
  --term-titlebar: #2d2d2d;
  --term-border: rgb(255 255 255 / 0.12);
  --term-text: #e8e8e8;
  --term-muted: #8c8c8c;

  --font: Futura, "Futura PT", "Century Gothic", "Trebuchet MS", sans-serif;
  --mono: "SF Mono", SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  font-family: var(--font);
  color: var(--ink);
  /* macOS-style wallpaper: soft overlapping blooms of the pastel palette */
  background:
    radial-gradient(60% 70% at 12% 18%, var(--peach-fuzz) 0%, transparent 70%),
    radial-gradient(55% 60% at 88% 12%, var(--lavender) 0%, transparent 70%),
    radial-gradient(70% 60% at 78% 88%, var(--baby-blue) 0%, transparent 70%),
    radial-gradient(55% 55% at 18% 92%, var(--cool-mint) 0%, transparent 70%),
    radial-gradient(40% 40% at 50% 50%, #f6dcd3 0%, transparent 80%),
    var(--pale-dogwood);
}

body.dragging-window {
  cursor: grabbing;
  user-select: none;
}

/* Mac menu bar */
.menubar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 28px;
  padding: 0 1rem;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  font-size: 13px;
  color: #1d1d1f;
  background: rgb(255 255 255 / 0.35);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 1px 0 rgb(0 0 0 / 0.06);
}

.clock {
  white-space: nowrap;
}

.menus {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

/* Mac dock */
.dock {
  position: fixed;
  left: 50%;
  bottom: 8px;
  translate: -50% 0;
  z-index: 20;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 20px;
  border: 1px solid rgb(255 255 255 / 0.45);
  background: rgb(255 255 255 / 0.3);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 10px 30px rgb(74 63 85 / 0.2);
}

.dock-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.5), 0 2px 6px rgb(74 63 85 / 0.2);
}

.dock-terminal {
  background: linear-gradient(160deg, #4a4a4a, var(--term-bg));
  color: var(--term-text);
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 700;
}

/* The little dot under running apps */
.dock-photos {
  padding: 0;
  border: 0;
  background: #fff;
  cursor: pointer;
}

.dock-photos svg {
  width: 40px;
  height: 40px;
}

.dock-photos ellipse {
  mix-blend-mode: multiply;
  opacity: 0.85;
}

.dock-icon.open::after {
  content: "";
  position: absolute;
  bottom: -5px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #1d1d1f;
}


main {
  width: 100vw;
  height: 100vh;
  display: grid;
  place-items: center;
  /* Leave room for the menu bar and the dock */
  padding: calc(28px + 1.5rem) 2rem calc(72px + 1.5rem);
}

/* Keep the terminal above the photo windows */
main {
  position: relative;
  z-index: 1;
  /* Let clicks through the empty desktop to the photos behind it */
  pointer-events: none;
}

main > * {
  pointer-events: auto;
}

/* Photo windows that pop up on the desktop (see photos.js) */
.photos {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.photo {
  position: absolute;
  margin: 0;
  pointer-events: auto;
  cursor: grab;
  user-select: none;
  touch-action: none;
  overflow: hidden;
  background: var(--term-titlebar);
  border: 1px solid var(--term-border);
  border-radius: 10px;
  box-shadow:
    0 0 0 0.5px rgb(0 0 0 / 0.5),
    0 1rem 2.5rem rgb(74 63 85 / 0.3);
}

.photo .titlebar {
  height: 1.75rem;
  border-radius: 0;
  /* Center the name in the space right of the lights, so narrow photos fit it */
  padding: 0 8px 0 calc(0.6rem + 3 * 10px + 2 * 0.4rem + 8px);
}

.photo .lights {
  left: 0.6rem;
  gap: 0.4rem;
}

.photo .lights > * {
  width: 10px;
  height: 10px;
}

.photo .title {
  font-size: 0.7rem;
  white-space: nowrap;
}

.photo.waiting,
.photo.minimized {
  visibility: hidden;
}

.photo.dragging {
  cursor: grabbing;
}

.photo img {
  display: block;
  height: auto;
}

/* The terminal window */
.card {
  width: min(52rem, 100%);
  background: var(--term-bg);
  color: var(--term-text);
  font-family: var(--mono);
  border: 1px solid var(--term-border);
  border-radius: 12px;
  box-shadow:
    0 0 0 0.5px rgb(0 0 0 / 0.6),
    0 2rem 5rem rgb(74 63 85 / 0.35);
}

.titlebar {
  position: relative;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.25rem;
  background: var(--term-titlebar);
  border-radius: 11px 11px 0 0;
  border-bottom: 1px solid rgb(0 0 0 / 0.5);
}

#question .titlebar {
  cursor: grab;
  touch-action: none;
}

.lights {
  position: absolute;
  left: 0.85rem;
  display: flex;
  gap: 0.5rem;
}

.lights > * {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ff5f57;
}

.lights > :nth-child(2) {
  background: #febc2e;
}

.lights > :nth-child(3) {
  background: #28c840;
}

.title {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--term-muted);
}

.screen {
  padding: 1.5rem 1.75rem 2rem;
  font-size: 1.05rem;
  line-height: 1.7;
}

.line {
  margin: 0;
}

.muted {
  color: var(--term-muted);
}

/* Login and prompt lines are just scenery, so keep them small */
#last-login,
.line:has(.prompt) {
  font-size: 0.8em;
}

.error {
  color: var(--coral);
}

.prompt .stamp {
  color: var(--lavender);
}

.prompt .path {
  color: var(--cool-mint);
  font-weight: 600;
}

.cursor {
  display: inline-block;
  width: 0.6em;
  height: 1.1em;
  vertical-align: text-bottom;
  background: var(--term-text);
  animation: blink 1.1s steps(1) infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

h1 {
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  font-weight: 600;
  color: var(--peach-fuzz);
  margin: 0.25rem 0 1.5rem;
  line-height: 1.3;
}

.date-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
}

.date-list .done {
  text-decoration: line-through;
  text-decoration-color: var(--coral);
  text-decoration-thickness: 2px;
}

#next-dates .date-list {
  color: var(--lavender);
}

#next-dates .text-me {
  margin: -0.5rem 0 1.25rem;
  color: var(--cool-mint);
}

#next-dates .when {
  color: var(--peach-fuzz);
  font-weight: 600;
}

/* Room for a border, pulled back out so the text stays lined up */
#next-dates .date-list li {
  margin: 0 -0.6rem 0.25rem;
  padding: 0.35rem 0.6rem;
  border: 1px solid transparent;
  border-radius: 8px;
  transition: border-color 0.4s ease;
}

#next-dates .date-list li:hover {
  border-color: var(--lavender);
  animation: date-pulse 2.4s ease-in-out infinite;
}

@keyframes date-pulse {
  from {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--lavender) 50%, transparent);
  }
  to {
    box-shadow: 0 0 0 8px color-mix(in srgb, var(--lavender) 0%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  #next-dates .date-list li:hover {
    animation: none;
  }
}

.date-list a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.answers {
  display: flex;
  gap: 1.25rem;
}

.btn {
  font-family: var(--mono);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--ink);
  border: none;
  border-radius: 6px;
  padding: 0.6rem 1.75rem;
  cursor: pointer;
  box-shadow: 0 0.5rem 1.25rem rgb(0 0 0 / 0.3);
}

.btn-yes {
  background: var(--cool-mint);
  transition: transform 150ms ease, box-shadow 150ms ease;
}

.btn-yes:hover {
  transform: scale(1.05);
  box-shadow: 0 0.75rem 1.5rem rgb(0 0 0 / 0.4);
}

.btn-yes:focus-visible {
  outline: 2px solid var(--term-text);
  outline-offset: 3px;
}

.btn-no {
  background: var(--baby-blue);
  position: relative;
  z-index: 10;
  transition:
    translate 700ms cubic-bezier(0.22, 1, 0.36, 1),
    rotate 700ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.btn-game {
  background: var(--lavender);
  transition: transform 150ms ease, box-shadow 150ms ease;
}

.btn-game:hover {
  transform: scale(1.05);
}

.btn-game:focus-visible,
.btn-small:focus-visible {
  outline: 2px solid var(--term-text);
  outline-offset: 3px;
}

/* Zip game window */
.game {
  width: min(48rem, calc(100vw - 2rem));
  padding: 0;
  overflow: visible;
}

.game::backdrop {
  background: rgb(74 63 85 / 0.35);
  backdrop-filter: blur(3px);
}

.light-close {
  border: none;
  padding: 0;
  cursor: pointer;
}

.light-close:focus-visible {
  outline: 2px solid var(--term-text);
  outline-offset: 2px;
}

.zip {
  /* As big as possible while the whole game window still fits on screen */
  --cell: clamp(2.5rem, calc((100vh - 26rem) / 7), 4.5rem);
  position: relative;
  display: grid;
  width: max-content;
  grid-template-columns: repeat(var(--size), var(--cell));
  grid-auto-rows: var(--cell);
  margin: 1rem auto;
  border: 2px solid var(--term-muted);
  border-radius: 8px;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  cursor: pointer;
}

/* Focused when the game opens so arrow keys work; no ring needed */
.zip:focus {
  outline: none;
}

.zip-cell {
  display: grid;
  place-items: center;
  border-right: 1px solid rgb(255 255 255 / 0.08);
  border-bottom: 1px solid rgb(255 255 255 / 0.08);
  transition: background 150ms ease;
}

.zip-cell.wall-right {
  border-right: 4px solid var(--term-text);
}

.zip-cell.wall-bottom {
  border-bottom: 4px solid var(--term-text);
}

/* NYC subway branding. Each line sets --line, and everything else reads it. */
[data-line="L"] {
  --line: #a7a9ac;
}

[data-line="ACE"] {
  --line: #0039a6;
}

[data-line="JMZ"] {
  --line: #996633;
}

[data-line="123"] {
  --line: #ee352e;
}

.zip-cell[data-line] {
  background: color-mix(in srgb, var(--line) 22%, transparent);
}

.zip-path {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.zip-path polyline {
  fill: none;
  stroke: var(--line);
  stroke-width: 0.36;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke-width 150ms ease;
}

.zip-path polyline.active {
  stroke-width: 0.44;
}

/* Route bullets: white Helvetica on a colored circle, like the signs */
.bullet {
  position: relative;
  z-index: 1;
  display: inline-grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: var(--line);
  color: #fff;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 0 0 2px var(--term-bg);
}

.zip .bullet {
  width: calc(var(--cell) * 0.68);
  height: calc(var(--cell) * 0.68);
  font-size: calc(var(--cell) * 0.38);
}

/* Stop order: which stop of its line this is */
.bullet[data-order]::after {
  content: attr(data-order);
  position: absolute;
  right: -0.35rem;
  bottom: -0.35rem;
  display: grid;
  place-items: center;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 50%;
  background: var(--term-text);
  color: var(--term-bg);
  font-size: 0.65rem;
}

.zip-legend {
  display: flex;
  justify-content: center;
  gap: 1rem;
  list-style: none;
  padding: 0;
  margin: 0 0 0.5rem;
}

.zip-legend li {
  display: flex;
  align-items: center;
}

.legend-button {
  display: flex;
  gap: 0.2rem;
  padding: 0.3rem 0.4rem;
  border-radius: 999px;
  border: 1px solid transparent;
  background: none;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 150ms ease, border-color 150ms ease;
}

.legend-button:hover {
  opacity: 0.85;
}

.legend-button:focus-visible {
  outline: 2px solid var(--term-text);
  outline-offset: 2px;
}

.zip-legend .bullet {
  width: 1.6rem;
  height: 1.6rem;
  font-size: 0.95rem;
  box-shadow: none;
}

.zip-legend li.active .legend-button {
  opacity: 1;
  border-color: var(--line);
  background: color-mix(in srgb, var(--line) 20%, transparent);
}

.zip-legend li.done .legend-button {
  opacity: 1;
}

.zip-legend li.done::after {
  content: "✓";
  margin-left: 0.3rem;
  color: var(--cool-mint);
  font-weight: 700;
}

/* The stop to head for next: a ring in the line's color pulses around it */
.bullet.next {
  animation: next-stop 1.2s ease-in-out infinite;
}

@keyframes next-stop {
  0%,
  100% {
    box-shadow:
      0 0 0 2px var(--term-bg),
      0 0 0 3px var(--line);
  }
  50% {
    box-shadow:
      0 0 0 2px var(--term-bg),
      0 0 0 9px color-mix(in srgb, var(--line) 35%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bullet.next {
    animation: none;
    box-shadow:
      0 0 0 2px var(--term-bg),
      0 0 0 5px var(--line);
  }
}

.how-to {
  margin: 0.5rem 0 1rem;
  color: var(--term-muted);
  font-size: 0.9rem;
  line-height: 1.6;
}

.how-to b {
  color: var(--term-text);
}

.game-status {
  min-height: 2.4em;
  margin-top: 0.75rem;
  color: var(--peach-fuzz);
}

.game-status.won {
  color: var(--cool-mint);
}

.game-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.btn-small {
  font-size: 0.9rem;
  padding: 0.4rem 1rem;
  background: var(--term-titlebar);
  color: var(--term-text);
  box-shadow: none;
  border: 1px solid var(--term-border);
}

.btn-small:hover {
  background: #3a3a3a;
}

/* Desktop / mobile gating */
.mobile-only {
  display: none;
}

.confetti {
  position: fixed;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  pointer-events: none;
  /* Above everything, menu bar and dock included */
  z-index: 40;
}

/* Desktop means the main input is a mouse or trackpad (something that hovers
   and points precisely) and a window at least 900px wide. Phones and tablets
   fail the first check at any size; small desktop windows fail the second. */
@media not ((hover: hover) and (pointer: fine)), (max-width: 900px) {
  .desktop-only {
    display: none;
  }

  .mobile-only {
    display: grid;
  }

  .dock {
    display: none;
  }

  /* Only room for "Terminal" and the clock on a phone */
  .menus span {
    display: none;
  }
}

/* Browsers that report themselves as mobile (set in script.js) */
.is-mobile .desktop-only {
  display: none;
}

.is-mobile .mobile-only {
  display: grid;
}

.is-mobile .dock,
.is-mobile .menus span {
  display: none;
}

/* Narrow windows just get a tighter screen */
@media (max-width: 900px) {
  .screen {
    padding: 1.25rem;
    font-size: 0.95rem;
  }
}