/* ---- Pets to claim (viewer/pet-claims.js, WOR-208) ----
   Menu design law: moss glass panel (.panel), brass accents, 11px floor, one border per surface,
   exactly one butter-gold CTA per row that has something to do. It opens where the Companions
   menu opens, because it is reached from the same button and the two never show together. */
#petclaims { top: 76px; right: 12px; width: 288px; padding: 10px; font-size: 12px; max-height: 84vh; overflow-y: auto; display: none; z-index: 6; }
#petclaims .game-panel-header { margin-bottom: 8px; }
#petclaims .panel-kicker { font-size: 11px; }
#petclaims .pc-note { margin: 0 2px 10px; color: var(--ui-ink); font-size: 12px; line-height: 1.5; }
#petclaims .pc-back { flex: 0 0 auto; }

/* Rows are separated by a hairline rule, never boxed: the panel already spent the border. The
   drill-in usually shows one row, straight under the header, so the first rule is dropped. */
#petclaims .pc-row { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; padding: 10px 2px; border-top: 1px solid var(--ui-hairline); }
#petclaims .game-panel-header + .pc-row { border-top: 0; }
#petclaims .pc-art { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 10px;
  background: radial-gradient(circle at 50% 40%, #3b3566 0%, #262a45 55%, #171a2a 100%); }
#petclaims .pc-art img { width: 56px; height: 56px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .45)); }
#petclaims .pc-row.locked .pc-art img, #petclaims .pc-row.closed .pc-art img, #petclaims .pc-row.upcoming .pc-art img { filter: grayscale(.7) brightness(.8); }
#petclaims .pc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
#petclaims .pc-head b { font: 700 16px/1.15 Georgia, "PT Serif", serif; color: var(--ui-ink); }
#petclaims .pc-badge { flex: 0 0 auto; color: #a7b6a0; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
#petclaims .pc-row.claimable .pc-badge { color: #f1d27d; }
#petclaims .pc-row.claimed .pc-badge { color: #b3e672; }
#petclaims .pc-title { color: var(--ui-brass); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
#petclaims .pc-earn { margin: 4px 0 0; color: var(--ui-ink); font-size: 12px; line-height: 1.45; }
#petclaims .pc-reason, #petclaims .pc-linked { margin: 5px 0 0; color: #a7b6a0; font-size: 11.5px; line-height: 1.45; }
#petclaims .pc-window { margin: 5px 0 0; color: #7f8f7c; font-size: 11px; line-height: 1.4; }
#petclaims .pc-progress { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
#petclaims .pc-progress i { flex: 1 1 auto; display: block; height: 5px; overflow: hidden; border-radius: 3px; background: rgba(4, 12, 8, .55); }
#petclaims .pc-progress b { display: block; height: 100%; background: linear-gradient(90deg, #c6a85b, #f2e6bd); }
#petclaims .pc-progress span { flex: 0 0 auto; color: var(--ui-ink); font-size: 11px; font-weight: 700; }

/* The gold CTA. At most one shows in a row: Claim while it is ready, the road to Clover after. */
#petclaims .pc-claim {
  display: block; width: 100%; min-height: 42px; margin-top: 8px; padding: 9px 12px;
  color: #22170e; font: 800 13px/1 inherit; letter-spacing: .04em;
  background: linear-gradient(180deg, #f1d27d, #c99443); border: 1px solid #f1d27d; border-radius: 11px;
  box-shadow: 0 3px 0 rgba(4, 9, 6, .72); cursor: pointer;
}
#petclaims .pc-claim:hover:not(:disabled) { filter: brightness(1.08); }
#petclaims .pc-claim:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 rgba(4, 9, 6, .72); }
#petclaims .pc-claim:disabled { cursor: default; opacity: .55; }
#petclaims .pc-foot { margin: 8px 2px 0; padding-top: 8px; border-top: 1px solid var(--ui-hairline); font-size: 11px; }
#petclaims .pc-foot a { color: var(--ui-brass); font-weight: 700; text-decoration: none; }

/* Hidden wherever the Companions menu is hidden, for the same reasons. */
body.convo #petclaims, body.cine #petclaims, body.tut #petclaims,
body.selftalk #petclaims, body.riding #petclaims, body.watch #petclaims, body.world3card #petclaims,
body.mailopen #petclaims, body.digitizing #petclaims { display: none !important; }
@media (max-width: 720px) {
  /* 60px button column + this panel's own 22px of padding and border + a 12px left gutter. */
  #petclaims { top: 12px; right: 60px; width: min(288px, calc(100vw - 94px)); max-height: calc(100dvh - 90px); }
  #petclaims .pc-row { grid-template-columns: 52px minmax(0, 1fr); gap: 8px; }
  #petclaims .pc-art { width: 52px; height: 52px; }
  #petclaims .pc-art img { width: 46px; height: 46px; }
}

#petclaims .pc-read {background:none;border:0;padding:8px 0;color:var(--ui-brass);font:700 12px/1.4 inherit;cursor:pointer;text-decoration:underline;}