/* Mini-game styles: play (loaded after shell.css). */

/* ---------- pixel star (same grid as the dock's star) ---------- */
.px-star{--px:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' shape-rendering='crispEdges'%3E%3Cpath d='M6 0h2v1H6zM6 1h2v1H6zM5 2h4v1H5zM5 3h4v1H5zM0 4h14v1H0zM1 5h12v1H1zM2 6h10v1H2zM3 7h8v1H3zM3 8h8v1H3zM2 9h4v1H2zM8 9h4v1H8zM2 10h3v1H2zM9 10h3v1H9zM1 11h3v1H1zM10 11h3v1H10zM1 12h2v1H1zM11 12h2v1H11z'/%3E%3C/svg%3E")}
.meadow-stars { display: inline-flex; gap: 2px; vertical-align: middle; }
.meadow-stars .px { --px-size: 16px; color: #dccfa9; }
.meadow-stars .px.is-earned { color: var(--cz-gold-deep); }

/* ---------- Matching meadow ---------- */
#matching-dialog .matching-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 0;
  border: 0;
}
#matching-dialog #matching-stats { margin: 0; font-size: 14px; color: var(--cz-cocoa); }
#matching-dialog .meadow-best {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--cz-cocoa-soft);
}
#matching-dialog #matching-start { flex: none; }
#matching-dialog .matching-board { margin-top: 12px; }
/* Card art is 30×30: shown at 2× (1.5× on narrow phones, crisp on their dense screens). */
#matching-dialog .matching-card canvas { width: 60px; height: 60px; }
@media (max-width: 420px) { #matching-dialog .matching-card canvas { width: 45px; height: 45px; } }
.matching-card[aria-disabled="true"] { cursor: default; }
.matching-card.matched { pointer-events: none; }
.matching-card:hover:not([aria-disabled="true"]) { filter: brightness(1.04); }
#matching-dialog #matching-status {
  min-height: 24px;
  margin: 12px 0 8px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--cz-cocoa);
}
#matching-dialog #matching-status.is-result {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 12px 14px;
  text-align: center;
  background: #fff6d9;
  border: 2px solid var(--cz-gold-deep);
  border-radius: 14px;
}
#matching-status.is-result .meadow-stars { gap: 6px; }
#matching-status.is-result .meadow-stars .px { --px-size: 30px; }
#matching-status.is-result strong { font-family: var(--cz-font-display); font-size: 18px; font-weight: 600; }
#matching-status .meadow-note:empty { display: none; }
#matching-status .meadow-note { font-size: 14px; color: var(--cz-cocoa-soft); }
.meadow-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-top: 4px;
}
.meadow-controls #matching-hide { min-height: 38px; }
.meadow-pace {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--cz-cocoa-soft);
}
#matching-dialog .meadow-pace select { width: auto; min-height: 38px; padding: 4px 8px; font-size: 14px; }
.meadow-restart { margin-left: auto; min-height: 38px; padding: 0 4px; font-size: 14px; }

/* A found pair pops, a finished board waves and the stars land. Motion off: none of it. */
@media (prefers-reduced-motion: no-preference) {
  #matching-dialog[data-motion="full"] .matching-card.is-pop { animation: meadow-pop 0.42s var(--cz-ease); }
  #matching-dialog[data-motion="full"] .matching-board.is-complete .matching-card {
    animation: meadow-wave 0.6s ease-in-out both;
    animation-delay: calc(var(--i, 0) * 45ms);
  }
  #matching-dialog[data-motion="full"] #matching-status.is-result { animation: meadow-rise 0.45s var(--cz-ease); }
  #matching-dialog[data-motion="full"] #matching-status.is-result .px.is-earned { animation: meadow-star 0.5s var(--cz-ease) both; }
  #matching-dialog[data-motion="full"] #matching-status.is-result .px.is-earned:nth-child(2) { animation-delay: 0.12s; }
  #matching-dialog[data-motion="full"] #matching-status.is-result .px.is-earned:nth-child(3) { animation-delay: 0.24s; }
}
@keyframes meadow-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.12) rotate(-2deg); filter: brightness(1.1); }
  100% { transform: scale(1); }
}
@keyframes meadow-wave {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(-6px); }
}
@keyframes meadow-rise {
  from { opacity: 0; transform: translateY(6px) scale(0.97); }
  to { opacity: 1; transform: none; }
}
@keyframes meadow-star {
  0% { transform: scale(0) rotate(-30deg); }
  70% { transform: scale(1.25); }
  100% { transform: scale(1); }
}

/* ---------- Pet playground ---------- */
#pet-lounge-dialog #pet-care-status { min-height: 22px; margin: 0 0 4px; font-size: 14px; color: var(--cz-cocoa); }
#pet-lounge-dialog .pet-group-label { margin: 14px 0 6px; font-size: 15px; color: var(--cz-cocoa); }
#pet-lounge-dialog .pet-group-hint { margin: 6px 0 0; font-size: 13px; line-height: 1.4; color: var(--cz-cocoa-soft); }
#pet-lounge-dialog .pet-care-actions .button:disabled { opacity: 0.7; }
#pet-lounge-dialog .pet-command-actions { margin-block: 0; }
#pet-lounge-dialog .pet-tricks { margin-top: 0; }
#pet-lounge-dialog .pet-motion-setting { margin-top: 14px; }
#pet-lounge-dialog > .button:last-child { margin-top: 12px; }
.pet-follow-toggle {
  display: inline-flex;
  border: var(--cz-border) solid var(--cz-cocoa);
  border-radius: 12px;
  box-shadow: 0 3px 0 var(--cz-cocoa);
  overflow: hidden;
}
.pet-follow-toggle .button { min-height: 40px; }
.pet-follow-toggle .button,
.pet-follow-toggle .button:hover:not(:disabled),
.pet-follow-toggle .button:active:not(:disabled) {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: none;
}
.pet-follow-toggle .button + .button { border-left: var(--cz-border) solid var(--cz-cocoa); }
.pet-follow-toggle .button[aria-pressed="true"] { background: var(--cz-peach); color: var(--cz-cocoa-deep); }
.pet-follow-toggle .button[aria-pressed="false"] { background: var(--cz-paper); color: var(--cz-cocoa-soft); }

/* ---------- Starter quests ---------- */
#quest-list .quest-intro { margin: 0 0 10px; font-size: 14px; color: var(--cz-cocoa-soft); }
#quest-list .quest-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 12px;
}
#quest-list .quest-row small { margin-top: 3px; }
#quest-list .quest-row .quest-reward {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  font-size: 13px;
  color: var(--cz-cocoa);
}
#quest-list .quest-reward .px { --px-size: 14px; color: var(--cz-gold-deep); }
#quest-list .quest-row.ready { border-left-color: var(--cz-moss-deep); background: #eef4dc; }
#quest-list .quest-row.claimed { opacity: 0.7; }
#quest-list .quest-row .button { min-height: 38px; padding: 4px 12px; font-size: 14px; }
#quest-list .quest-done {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--cz-moss-deep);
}
#quest-list .quest-done .px { --px-size: 16px; }

/* ---------- touch: every control is a comfortable target ---------- */
@media (pointer: coarse) {
  #matching-dialog .meadow-controls :is(button, select),
  #matching-dialog #matching-start,
  #matching-dialog .meadow-pace select,
  .pet-follow-toggle .button,
  #pet-lounge-dialog :is(.button, select),
  #quest-list .quest-row .button,
  #puzzle-activity-status button { min-height: 44px; }
}