:root {
  --ink: #3d2433;
  --mute: #8a6276;
  --paper: #ffe6f0;
  --wall: #f5b3cc;
  --line: #c45c88;
  --fill: #ff6b9d;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
html, body, a, button { cursor: url("../img/cursor.png") 1 1, pointer; }
body.kirby-hold,
body.kirby-hold * {
  cursor: url("../img/cursor-grab.png") 12 10, grabbing !important;
}

body {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  color: var(--ink);
  background:
    linear-gradient(#f7c4d8 0 42%, #e89ab8 42% 44%, #f3d0c4 44%);
  background-attachment: fixed;
  font-size: 14px;
  line-height: 1.5;
}

img { image-rendering: pixelated; image-rendering: crisp-edges; }
a { color: var(--fill); }

.wrap {
  width: min(680px, calc(100% - 24px));
  margin: 0 auto;
  padding: 20px 0 120px;
}

.nav {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--line);
}
.brand {
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.brand img { display: none; }
.nav-links { display: flex; gap: 4px; }
.nav-links a {
  color: var(--mute);
  text-decoration: none;
  padding: 4px 8px;
}
.nav-links a:hover,
.nav-links a.active {
  color: var(--ink);
  background: var(--paper);
}

h1 {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.03em;
  margin: 28px 0 8px;
}

.lede {
  max-width: 36em;
  color: var(--mute);
  margin: 0 0 24px;
}

.album-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.shot {
  display: block;
  text-decoration: none;
  background: var(--paper);
  border: 2px solid var(--line);
  padding: 8px;
  color: var(--ink);
  font-size: 12px;
}
.shot img { width: 100%; height: auto; display: block; margin-bottom: 6px; }

.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(40, 16, 28, .82);
  display: none;
  place-items: center;
  z-index: 40;
}
.lightbox.open { display: grid; }
.lightbox img { width: min(480px, 90vw); image-rendering: pixelated; }

.list {
  display: grid;
  gap: 12px;
}
.list article {
  background: var(--paper);
  border: 2px solid var(--line);
  padding: 12px 14px;
}
.list h2 { margin: 0 0 4px; font-size: 14px; }

.screen-kirby {
  position: fixed;
  z-index: 60;
  height: 72px;
  width: auto;
  pointer-events: auto;
  user-select: none;
  touch-action: none;
  transform-origin: 50% 100%;
  will-change: left, top, transform;
  cursor: url("../img/cursor-hand.png") 8 4, grab;
}
.screen-kirby.is-held { z-index: 80; }

.pantry {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 45;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 16px 12px;
  background: #3d2433;
  color: #ffd0e2;
  border-top: 2px solid #ff6b9d;
}
.meters {
  display: grid;
  gap: 6px;
  min-width: 140px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.meter {
  display: block;
  height: 8px;
  background: #2a1520;
  border: 1px solid #ff6b9d;
}
.meter > b {
  display: block;
  height: 100%;
  background: #ff6b9d;
  width: 0%;
}
.meter.energy > b { background: #7ec8ff; }
.foods { display: flex; gap: 10px; flex: 1; }
.food {
  width: 48px;
  height: 48px;
  background: #2a1520;
  border: 1px solid #c45c88;
  padding: 4px;
  touch-action: none;
}
.food img { width: 100%; height: 100%; pointer-events: none; }
.food.gone { visibility: hidden; pointer-events: none; }
.food.ghost {
  position: fixed;
  z-index: 90;
  pointer-events: none;
  width: 48px;
  height: 48px;
  margin: 0;
}
.hint {
  font-size: 11px;
  color: #c45c88;
  max-width: 12rem;
}

@media (max-width: 640px) {
  .album-grid { grid-template-columns: 1fr; }
  .hint { display: none; }
}