/* ---- Companion menu (2026-09-16) ----
   Menu design law: moss glass panel, brass accents, 11px floor, one border
   per surface, exactly one butter-gold CTA. The card inside mirrors the
   on-chain trading card (scripts/pet-metadata.mjs): night field for the
   founders lineage, pearl field for the Firstlight Three. */
/* A menu surface like #settings and #bugpanel: closed is display:none in CSS, open is an inline
   display:block from mmo.js setMenuOpen. z-index 6 clears #questlog (4) and #hud/#topbtns (5),
   which used to paint straight over this card. */
#petmenu { top: 76px; right: 12px; width: 288px; padding: 10px; font-size: 12px; max-height: 84vh; overflow-y: auto; display: none; z-index: 6; }
#petmenu .game-panel-header { margin-bottom: 8px; }
#petmenu .panel-kicker { font-size: 11px; }

#petmenu .pm-card {
  --pm-edge: #171924; --pm-field: #202432; --pm-ink: #f8e8bb; --pm-muted: #cfb989;
  --pm-paper: #eee2c5; --pm-paper-ink: #302d35; --pm-paper-muted: #655950; --pm-accent: #936c35;
  position: relative;
  padding: 10px 11px 11px;
  color: var(--pm-ink);
  background: var(--pm-field);
  border: 2px solid var(--pm-edge);
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px #e2b75e, inset 0 0 0 3px #694922, 0 8px 22px rgba(0, 0, 0, .45);
}
#petmenu.pearl .pm-card {
  --pm-edge: #d9d4e4; --pm-field: #f3edf4; --pm-ink: #372c4e; --pm-muted: #70617e;
  --pm-paper: #f8f3e8; --pm-paper-ink: #342b47; --pm-paper-muted: #6d6176; --pm-accent: #8d71a7;
  box-shadow: inset 0 0 0 1px #e9d9b3, inset 0 0 0 3px #9784b6, 0 8px 22px rgba(0, 0, 0, .35);
}
#petmenu .pm-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
#petmenu .pm-kicker { color: var(--pm-muted); font-size: 11px; font-weight: 800; letter-spacing: .22em; }
#petmenu .pm-title { font: 700 22px/1.1 Georgia, "PT Serif", serif; color: var(--pm-ink); }
/* The art field is a plain painted sky, never the trading-card face PNG: that
   face already carries the Wayseed, so it doubled the pet behind the floating
   one (Dan, 2026-09-17). Night field for the founders lineage, pearl for the
   Firstlight Three; the one pet on the card is the foreground sprite. */
#petmenu .pm-art {
  position: relative; display: grid; place-items: center; height: 150px; overflow: hidden;
  border-radius: 10px; box-shadow: inset 0 0 0 2px #e2b75e;
  background:
    radial-gradient(ellipse 70% 55% at 50% 100%, rgba(120, 96, 168, .55), transparent 70%),
    radial-gradient(circle at 50% 38%, #3b3566 0%, #262a45 45%, #171a2a 100%);
}
#petmenu .pm-art.three {
  box-shadow: inset 0 0 0 2px #e9d9b3;
  background:
    radial-gradient(ellipse 70% 55% at 50% 100%, rgba(196, 176, 226, .55), transparent 70%),
    radial-gradient(circle at 50% 38%, #fdf9ff 0%, #ebe3f3 50%, #d6cbe6 100%);
}
#petmenu .pm-art::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 62%, rgba(255, 244, 200, .22), transparent 48%); pointer-events: none; }
#petmenu .pm-art img { position: relative; width: 118px; height: 118px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .45)); animation: pm-float 2.4s ease-in-out infinite; }
@keyframes pm-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
#petmenu .pm-paper { margin-top: 9px; padding: 8px 10px 9px; color: var(--pm-paper-ink); background: var(--pm-paper); border-radius: 9px; box-shadow: inset 0 0 0 1px #94703b; }
#petmenu .pm-ability { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
#petmenu .pm-ability b { font: 700 14px Georgia, "PT Serif", serif; }
#petmenu .pm-ability span { color: var(--pm-paper-muted); font-size: 11px; letter-spacing: .18em; }
#petmenu .pm-paper p { margin: 4px 0 0; font-size: 11.5px; line-height: 1.45; }

#petmenu .pm-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; margin: 10px 2px 8px; }
#petmenu .pm-stats > div { min-width: 0; }
#petmenu .pm-stats > .pm-wide { grid-column: 1 / -1; }
#petmenu .pm-stats dt { color: var(--ui-brass); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
#petmenu .pm-stats dd { margin: 1px 0 0; color: var(--ui-ink); font-size: 12.5px; font-weight: 700; }
#petmenu .pm-meter { display: block; height: 5px; margin-top: 4px; overflow: hidden; border-radius: 3px; background: rgba(4, 12, 8, .55); }
#petmenu .pm-meter b { display: block; height: 100%; background: linear-gradient(90deg, #c6a85b, #f2e6bd); }
#petmenu .pm-meter.train b { background: linear-gradient(90deg, #6f8d50, #b3e672); }

/* A quiet secondary: choose who walks beside you. Never gold, the gold CTA below stays Train. */
#petmenu .pm-equip {
  display: block; width: 100%; min-height: 40px; margin: 0 0 7px; padding: 8px 14px;
  color: var(--ui-ink); font: 700 12.5px/1 inherit; letter-spacing: .04em;
  background: rgba(4, 12, 8, .45); border: 1px solid rgba(198, 168, 91, .45); border-radius: 11px; cursor: pointer;
}
#petmenu .pm-equip:hover:not(:disabled) { border-color: var(--ui-brass); }
#petmenu .pm-equip:disabled { cursor: default; opacity: .55; }

/* Pets to earn (2026-09-24): a strip of portraits, no words. Grey while locked, a gold ring and
   dot when one wants attention, a small green tick once it is yours. A tap opens its drill-in. */
#petmenu .pm-earn { margin: 10px 0 0; padding-top: 8px; border-top: 1px solid var(--ui-hairline); }
#petmenu .game-panel-header + .pm-earn { margin-top: 0; padding-top: 0; border-top: 0; }
#petmenu .pm-earn-head { margin: 0 2px 6px; color: var(--ui-brass); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
#petmenu .pm-earn-row { display: flex; flex-wrap: wrap; gap: 6px; }
#petmenu .pm-earn-chip { position: relative; display: grid; place-items: center; width: 52px; height: 52px; padding: 0; cursor: pointer;
  background: radial-gradient(circle at 50% 40%, #3b3566 0%, #262a45 55%, #171a2a 100%); border: 1px solid #39415c; border-radius: 11px;
  transition: border-color .12s, transform .12s; }
#petmenu .pm-earn-chip:hover { border-color: var(--ui-brass); transform: translateY(-1px); }
#petmenu .pm-earn-chip img { width: 42px; height: 42px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .45)); }
#petmenu .pm-earn-chip.locked img, #petmenu .pm-earn-chip.closed img, #petmenu .pm-earn-chip.upcoming img { filter: grayscale(.8) brightness(.7); }
#petmenu .pm-earn-chip.attention { border-color: #f1d27d; box-shadow: 0 0 0 1px #f1d27d inset, 0 0 10px rgba(241, 210, 125, .35); }
#petmenu .pm-earn-chip.attention::after { content: ""; position: absolute; top: 3px; right: 3px; width: 8px; height: 8px; border-radius: 50%;
  background: #f1d27d; box-shadow: 0 0 0 2px rgba(16, 27, 20, .9); }
#petmenu .pm-earn-got { position: absolute; left: 3px; bottom: 3px; width: 12px; height: 12px; border-radius: 50%; background: #b3e672;
  box-shadow: 0 0 0 2px rgba(16, 27, 20, .9); }
#petmenu .pm-earn-got::after { content: ""; position: absolute; left: 4px; top: 2px; width: 3px; height: 6px; border: solid #173526; border-width: 0 2px 2px 0; transform: rotate(45deg); }
/* The one HUD signal that a pet is waiting: a small gold dot, no motion, no sound. */
#topbtns #petbtn { position: relative; }
#topbtns #petbtn.pm-waiting::after {
  content: ""; position: absolute; top: 5px; right: 5px; width: 9px; height: 9px; border-radius: 50%;
  background: #f1d27d; box-shadow: 0 0 0 2px rgba(16, 27, 20, .9);
}

/* THE gold CTA of this panel. */
#petmenu .pm-train {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 42px; padding: 9px 14px;
  color: #22170e; font: 800 14px/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), 0 0 18px rgba(241, 210, 125, .25);
  cursor: pointer;
}
#petmenu .pm-train .ui-icon { width: 18px; height: 18px; color: #22170e; }
#petmenu .pm-train:hover:not(:disabled) { filter: brightness(1.08); }
#petmenu .pm-train:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 rgba(4, 9, 6, .72); }
#petmenu .pm-train:disabled { cursor: default; opacity: .55; }
#petmenu .pm-note { margin: 7px 2px 0; color: #a7b6a0; font-size: 11px; line-height: 1.45; }
/* Quieter than the note above it: the gold CTA is Train, and this is a place to
   go and check, not a thing to do now. No border, so the panel's border budget
   is untouched. */
#petmenu .pm-chain { margin: 5px 2px 0; color: #7f8f7c; font-size: 11px; line-height: 1.45; }
#petmenu .pm-chain a { color: var(--ui-brass); font-weight: 700; text-decoration: none; border-bottom: 1px solid rgba(198, 168, 91, .45); }
#petmenu .pm-chain a:hover { color: #f2e6bd; border-bottom-color: #f2e6bd; }

#topbtns #petbtn[hidden] { display: none !important; }
#topbtns #petbtn .ui-icon { --icon-leaf: #8bb86a; }
/* WOR-212: the one-time pointer after the Warrenkeeper names the pet menu at the Descent's
   door. A gold ring breathes out from the paw three times and stops. box-shadow only, so the
   button never moves and the panel's border budget is untouched. */
#topbtns #petbtn.point { animation: petbtn-point 2s ease-out 3; }
@keyframes petbtn-point {
  0% { box-shadow: 0 0 0 0 rgba(243, 199, 92, .85); }
  70% { box-shadow: 0 0 0 14px rgba(243, 199, 92, 0); }
  100% { box-shadow: 0 0 0 0 rgba(243, 199, 92, 0); }
}
@media (prefers-reduced-motion: reduce) { #topbtns #petbtn.point { animation: none; outline: 2px solid #f3c75c; } }
/* Clover's own party panel is the companion HUD there; the same rules that
   hide the bag and wardrobe (game-ui.css) apply to the menu. */
body.clover-world #petbtn, body.clover-world #petmenu,
body.convo #petmenu, body.cine #petmenu, body.tut #petmenu, body.tut #petbtn,
body.selftalk #petmenu, body.riding #petmenu, body.watch #petbtn, body.watch #petmenu,
body.world3card #petmenu, body.mailopen #petmenu { display: none !important; }
@media (max-width: 720px) {
  #petmenu { top: 12px; right: 60px; width: min(288px, calc(100vw - 72px)); max-height: calc(100dvh - 90px); }
}

/* ---- Train digitization overlay (viewer/digitize-transition.js) ---- */
#digitize { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 58; pointer-events: none; image-rendering: pixelated; }
body.digitizing #hud, body.digitizing #topbtns, body.digitizing #orders, body.digitizing #places, body.digitizing #bag,
body.digitizing #wardrobe, body.digitizing #petmenu, body.digitizing #chat, body.digitizing #chatlog, body.digitizing #socialdock,
body.digitizing #chatlogbtn, body.digitizing #objective, body.digitizing #nearbyactions, body.digitizing #toast,
body.digitizing #plancard, body.digitizing #planstrip, body.digitizing #suitdock, body.digitizing #sworddock,
body.digitizing #clover-ui { display: none !important; }

/* The roster strip: one chip per companion the traveler owns, shown only when there is more than
   one to choose between. The chip carries the pet's own art, its training level, and a dot when
   that companion is the one currently at the traveler's side. */
.pm-roster{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 10px;padding:0}
.pm-chip{position:relative;width:46px;height:46px;padding:0;border-radius:11px;cursor:pointer;
  background:#1c2233;border:1px solid #39415c;display:grid;place-items:center;transition:border-color .12s,transform .12s}
.pm-chip:hover{border-color:var(--pm-grade,#8fa7d8);transform:translateY(-1px)}
.pm-chip.on{border-color:var(--pm-grade,#f2c94c);box-shadow:0 0 0 1px var(--pm-grade,#f2c94c) inset}
.pm-chip.three{background:#262036}
.pm-chip img{width:34px;height:34px;object-fit:contain;image-rendering:pixelated}
.pm-chip b{position:absolute;right:2px;bottom:1px;font-size:9px;font-weight:800;color:#0f1320;
  background:var(--pm-grade,#cdd7ef);border-radius:5px;padding:0 3px;line-height:12px}
.pm-chip-here{position:absolute;left:3px;top:3px;width:6px;height:6px;border-radius:50%;background:#7fd0ec}
/* Out with another of the wallet's bunnies (docs/pet-stable.md): a hollow dot, never a lock. */
.pm-chip-away{position:absolute;left:3px;top:3px;width:6px;height:6px;border-radius:50%;box-shadow:inset 0 0 0 1.5px #b9a98a}
@media(max-width:700px){.pm-chip{width:42px;height:42px}.pm-chip img{width:30px;height:30px}}

/* ---- opening the card (2026-09-29) ---------------------------------------
   Two opens, deliberately not the same thing (viewer/pet-menu.js, the note
   above GREETED_KEY). `pm-quick` is every ordinary open: 130 ms, a rise and a
   settle, nothing to sit through. `pm-landing` is the one open per companion
   where the card has never been shown before: it deals in, the light passes
   over it once, the art arrives, and the rows under it follow.

   Everything is transform/opacity so it composites, and nothing here scales a
   sprite to fake motion -- `.pm-art img` keeps its own locked painting and
   only rises into place. No shadow is added under anything: an ellipse under a
   sprite reads as floating (Dan, 2026-09-27), and the card's existing
   drop-shadow on the art is the art's own, untouched. */
#petmenu.pm-quick { animation: pm-open-quick .13s ease-out both; }
@keyframes pm-open-quick {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

#petmenu.pm-landing { animation: pm-open-landing .42s cubic-bezier(.16,.84,.3,1) both; }
@keyframes pm-open-landing {
  from { opacity: 0; transform: translateY(-18px) scale(.92); }
  60%  { opacity: 1; }
  to   { opacity: 1; transform: none; }
}
/* The card itself arrives a beat behind the panel, so the panel is the frame
   and the card is the thing put into it. */
#petmenu.pm-landing .pm-card { animation: pm-card-deal .56s .08s cubic-bezier(.16,.84,.3,1) both; }
@keyframes pm-card-deal {
  from { opacity: 0; transform: translateY(16px) rotate(-1.6deg); }
  to   { opacity: 1; transform: none; }
}
/* One pass of light across the card face, the trading card catching the sun.
   `.pm-card` is already `position: relative` and already owns an ::after for
   its vignette, so this rides on a dedicated element-free layer: an inset
   pseudo on `.pm-art`, which is the only part of the card with room for it. */
#petmenu.pm-landing .pm-art::before {
  content: ""; position: absolute; inset: -20% -60%; z-index: 2; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 246, 214, .55) 50%, transparent 62%);
  animation: pm-sweep .62s .26s ease-out both;
}
@keyframes pm-sweep { from { transform: translateX(-72%); } to { transform: translateX(72%); } }
/* A single gold ring out of the card edge, the same shape the paw button's
   one-time pointer uses, so the menu and the button speak the same language. */
#petmenu.pm-landing .pm-card::before {
  content: ""; position: absolute; inset: -2px; z-index: 0; border-radius: 15px; pointer-events: none;
  animation: pm-card-ring .78s .18s ease-out both;
}
@keyframes pm-card-ring {
  0%   { box-shadow: 0 0 0 0 rgba(243, 199, 92, .75); }
  70%  { box-shadow: 0 0 0 13px rgba(243, 199, 92, 0); }
  100% { box-shadow: 0 0 0 0 rgba(243, 199, 92, 0); }
}
/* The companion rises into its own frame. The float loop it normally runs is
   held off until the arrival has landed, or the two fight over the transform. */
#petmenu.pm-landing .pm-art img { animation: pm-art-arrive .5s .14s cubic-bezier(.16,.84,.3,1) both, pm-float 2.4s .64s ease-in-out infinite; }
@keyframes pm-art-arrive {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}
/* …and the readings under it follow, in one short stagger. The roster strip is
   left alone: it is navigation, not part of the reveal. */
#petmenu.pm-landing .pm-paper { animation: pm-row-in .34s .34s ease-out both; }
#petmenu.pm-landing .pm-stats { animation: pm-row-in .34s .42s ease-out both; }
#petmenu.pm-landing .pm-train { animation: pm-row-in .34s .5s ease-out both; }
@keyframes pm-row-in {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: none; }
}
/* Reduced motion keeps both opens instant. The cues still play: a menu that
   makes no sound is not a calmer menu, it is a broken one. */
@media (prefers-reduced-motion: reduce) {
  #petmenu.pm-quick, #petmenu.pm-landing,
  #petmenu.pm-landing .pm-card, #petmenu.pm-landing .pm-art img,
  #petmenu.pm-landing .pm-paper, #petmenu.pm-landing .pm-stats, #petmenu.pm-landing .pm-train { animation: none; }
  #petmenu.pm-landing .pm-art::before, #petmenu.pm-landing .pm-card::before { display: none; }
}