/* Pixel Pets — scoped to /pet/. Nothing here leaks onto the other 14,600 pages.
   Design system: main.min.css vars (--bg --surface --ink --line etc). */

.pet-wrap { max-width: 720px; margin: 0 auto; padding: 0 20px; }

/* .pet-btn sets display:flex, which beats the user-agent [hidden] rule and
   leaves hidden buttons on screen. Scoped, important, and deliberate. */
.pet-wrap [hidden] { display: none !important; }

/* ── the stage ─────────────────────────────────────────────────── */
.pet-frame {
  /* the canvas is 168 logical px wide and stretches to its container. Without
     a cap, a 1100px desktop renders a pet roughly the size of a dinner plate. */
  max-width: 460px;
  margin: 0 auto;
  position: relative;
  background: #FFF;
  border: 1px solid var(--line, #E4E4E4);
  border-radius: 12px;
  overflow: hidden;
}
#petStage {
  display: block;
  width: 100%;
  height: auto;
  /* the whole point: never let the browser blur a 24px sprite */
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background: #F5EFE6;
}
.pet-err { text-align: center; color: #8c8c8c; font-size: 13px; padding: 10px; }

/* speech bubble sits over the scene, never pushes layout */
.pet-say {
  position: absolute;
  /* bottom, not top: a party hat or a halo sits above the head, and a bubble
     pinned to the top of the frame covered exactly that */
  left: 10px; right: 10px; bottom: 10px;
  background: rgba(255, 255, 255, .96);
  border: 1px solid var(--line, #E4E4E4);
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink, #0D0D0D);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .28s, transform .28s;
  pointer-events: none;
}
.pet-say.on { opacity: 1; transform: none; }

/* ── identity + growth ─────────────────────────────────────────── */
.pet-id { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 16px 0 4px; }
.pet-id h2 { font-size: 22px; margin: 0; line-height: 1.2; }
.pet-meta { font-size: 12.5px; color: var(--ink3, #888); }

.pet-growbar { height: 6px; background: var(--surface2, #F2F2F2); border-radius: 99px; overflow: hidden; margin: 10px 0 6px; }
.pet-growbar i { display: block; height: 100%; background: var(--ink, #0D0D0D); border-radius: 99px; width: 0; transition: width .8s cubic-bezier(.2,.8,.3,1); }
.pet-growlabel { font-size: 12px; color: var(--ink3, #888); margin: 0 0 16px; }

/* ── actions ───────────────────────────────────────────────────── */
.pet-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.pet-btn {
  min-height: 46px;                       /* WCAG 2.5.8 target size, with room */
  display: flex; align-items: center; justify-content: center; gap: 7px;
  background: var(--surface, #fff);
  border: 1px solid var(--line, #E4E4E4);
  border-radius: 8px;
  font: 600 14px Inter, system-ui, sans-serif;
  color: var(--ink, #0D0D0D);
  cursor: pointer;
  transition: transform .12s, border-color .18s, background .18s;
}
.pet-btn:hover { border-color: var(--ink4, #BBB); transform: translateY(-1px); }
.pet-btn:active { transform: translateY(0); }
.pet-btn.done { background: var(--surface2, #F2F2F2); color: var(--ink3, #888); }
.pet-btn.done::after { content: "✓"; font-size: 12px; }
.pet-btn svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.9; }

.pet-tidy { width: 100%; margin-bottom: 14px; background: #FFF8E8; border-color: #EBD9A8; }

.pet-secondary { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin: 4px 0 22px; }
.pet-link {
  background: none; border: none; padding: 8px 2px; min-height: 44px;
  font: 500 13px Inter, system-ui, sans-serif;
  color: var(--ink2, #3A3A3A); text-decoration: underline;
  text-underline-offset: 3px; cursor: pointer;
}
.pet-link:hover { color: var(--ink, #0D0D0D); }
.pet-link[disabled] { opacity: .55; cursor: default; }

/* ── the daily quote handoff ───────────────────────────────────── */
.pet-quote {
  border: 1px solid var(--line, #E4E4E4);
  border-radius: 12px;
  padding: 18px 18px 16px;
  background: var(--surface, #fff);
  margin-bottom: 26px;
}
.pq-intro { font-size: 12.5px; color: var(--ink3, #888); margin: 0 0 10px; }
.pq-q { font: italic 300 20px/1.45 Fraunces, Georgia, serif; margin: 0 0 10px; color: var(--ink, #0D0D0D); }
.pq-a { font-size: 12.5px; color: var(--ink2, #3A3A3A); margin: 0 0 12px; }
.pq-more {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 13px; font-weight: 600; color: var(--ink, #0D0D0D);
}

/* ── adoption ──────────────────────────────────────────────────── */
.pet-step h2 { font-size: 22px; margin: 0 0 6px; }
.pet-step > p { color: var(--ink2, #3A3A3A); font-size: 14.5px; margin: 0 0 18px; }

.pet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 10px;
  margin-bottom: 24px;
}
.pet-opt {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px 4px 8px;
  background: var(--surface, #fff);
  border: 1px solid var(--line, #E4E4E4);
  border-radius: 10px;
  cursor: pointer;
  font: 500 11.5px Inter, system-ui, sans-serif;
  color: var(--ink2, #3A3A3A);
  transition: transform .12s, border-color .18s, box-shadow .18s;
}
.pet-opt:hover { transform: translateY(-2px); border-color: var(--ink4, #BBB); box-shadow: 0 4px 12px rgba(0,0,0,.07); }
.pet-opt-img { width: 48px; height: 48px; image-rendering: pixelated; image-rendering: crisp-edges; }

.pet-name-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; }
#petPreview { width: 96px; height: 96px; image-rendering: pixelated; image-rendering: crisp-edges; }
#petNameInput {
  flex: 1; min-width: 180px; min-height: 46px;
  padding: 10px 14px;
  border: 1px solid var(--line, #E4E4E4); border-radius: 8px;
  font: 400 16px Inter, system-ui, sans-serif;   /* 16px stops iOS zooming on focus */
  color: var(--ink, #0D0D0D); background: #fff;
}
#petNameInput:focus { outline: 2px solid var(--ink, #0D0D0D); outline-offset: 1px; }
.pet-err-msg { color: #B4232A; font-size: 12.5px; margin: 0 0 10px; }

.pet-coats { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 20px; }
.pet-coat {
  width: 44px; height: 44px; border-radius: 50%;
  border: 2px solid var(--line, #E4E4E4);
  cursor: pointer; padding: 0;
  transition: transform .12s, border-color .18s;
}
.pet-coat:hover { transform: scale(1.06); }
.pet-coat.on { border-color: var(--ink, #0D0D0D); box-shadow: 0 0 0 2px #fff inset; }

.pet-go {
  min-height: 48px; padding: 12px 26px;
  background: var(--ink, #0D0D0D); color: #fff;
  border: none; border-radius: 8px;
  font: 600 15px Inter, system-ui, sans-serif; cursor: pointer;
}
.pet-go:hover { background: #262626; }

.pet-note { font-size: 12px; color: var(--ink3, #888); line-height: 1.6; }

@media (max-width: 520px) {
  .pet-wrap { padding: 0 14px; }
  .pet-actions { gap: 8px; }
  .pet-btn { font-size: 13px; }
  .pet-grid { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; }
  .pq-q { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .pet-btn, .pet-opt, .pet-coat { transition: none; }
  .pet-btn:hover, .pet-opt:hover, .pet-coat:hover { transform: none; }
  .pet-growbar i { transition: none; }
  .pet-say { transition: opacity .15s; transform: none; }
}

/* ── bond line, treats and dress-up ────────────────────────────── */
.pet-bond { font-size: 12px; color: var(--ink3, #888); margin: 2px 0 0; }

.pet-tray {
  border: 1px solid var(--line, #E4E4E4); border-radius: 10px;
  padding: 12px 12px 6px; margin-bottom: 14px; background: var(--surface, #fff);
}
.pet-tray-t { font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink3, #888); margin: 0 0 10px; }
.pet-treats { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 8px; }
.pet-treat {
  min-height: 46px; display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; background: var(--surface, #fff);
  border: 1px solid var(--line, #E4E4E4); border-radius: 8px; cursor: pointer;
  font: 500 13px Inter, system-ui, sans-serif; color: var(--ink, #0D0D0D);
  transition: transform .12s, border-color .18s;
}
.pet-treat:hover { transform: translateY(-1px); border-color: var(--ink4, #BBB); }
.pet-treat i { width: 14px; height: 14px; border-radius: 4px; flex: 0 0 auto; }

.pet-dress-t { display: block; margin-bottom: 10px; }
.pet-dress {
  border: 1px solid var(--line, #E4E4E4); border-radius: 10px;
  padding: 14px 14px 10px; margin-bottom: 18px; background: var(--surface, #fff);
}
.pet-dress-row { margin-bottom: 14px; }
.pet-dress-row h3 {
  font: 600 11px Inter, system-ui, sans-serif; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink3, #888); margin: 0 0 8px;
}
.pet-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.pet-chip {
  min-height: 40px; padding: 8px 12px;
  background: var(--surface, #fff); border: 1px solid var(--line, #E4E4E4);
  border-radius: 99px; cursor: pointer;
  font: 500 12.5px Inter, system-ui, sans-serif; color: var(--ink2, #3A3A3A);
  transition: transform .12s, border-color .18s, background .18s;
}
.pet-chip:hover { transform: translateY(-1px); border-color: var(--ink4, #BBB); }
.pet-chip.on { border-color: var(--ink, #0D0D0D); background: var(--ink, #0D0D0D); color: #fff; }
.pet-chip.lock { opacity: .5; cursor: default; }
.pet-chip.lock:hover { transform: none; border-color: var(--line, #E4E4E4); }
/* colour chips carry a dot of the actual coat so the choice is visible */
.pet-chip.sw { padding-left: 30px; position: relative; }
.pet-chip.sw::before {
  content: ""; position: absolute; left: 9px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px; border-radius: 50%; background: var(--sw, #ccc);
  box-shadow: 0 0 0 1px rgba(0,0,0,.12) inset;
}

@media (max-width: 520px) {
  .pet-actions { grid-template-columns: repeat(2, 1fr); }
  .pet-treats { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .pet-treat, .pet-chip { transition: none; }
  .pet-treat:hover, .pet-chip:hover { transform: none; }
}

/* inline rename, in place of window.prompt() */
.pet-rename-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0 0 14px; }
.pet-rename-l { font-size: 12px; color: var(--ink3, #888); flex: 0 0 auto; }
#petRenameInput {
  flex: 1; min-width: 150px; min-height: 44px; padding: 8px 12px;
  border: 1px solid var(--line, #E4E4E4); border-radius: 8px;
  font: 400 16px Inter, system-ui, sans-serif; color: var(--ink, #0D0D0D); background: #fff;
}
#petRenameInput:focus { outline: 2px solid var(--ink, #0D0D0D); outline-offset: 1px; }
.pet-rename-go { min-height: 44px; padding: 10px 18px; font-size: 14px; }
.pet-link.arm { color: #B4232A; font-weight: 700; }

/* ── the pet's question, and its own daily line ─────────────────── */
.pet-ask {
  border: 1px solid #EBD9A8; background: #FFF8E8;
  border-radius: 10px; padding: 14px; margin-bottom: 16px;
}
.pet-ask-q { font-size: 14.5px; font-weight: 600; color: var(--ink, #0D0D0D); margin: 0 0 10px; }
.pet-ask-row { display: flex; gap: 8px; flex-wrap: wrap; }
.pq-own {
  font-size: 13.5px; line-height: 1.55; color: var(--ink2, #3A3A3A);
  border-top: 1px solid var(--line, #E4E4E4); margin: 14px 0 0; padding-top: 12px;
}
/* 50 scenes is a long list, so it scrolls rather than pushing the page down */
.pet-scenes { max-height: 168px; overflow-y: auto; padding-right: 4px; }