/* Pets (client/panels-pets.js) — the Kennel: warm planks, straw and leather; brass for what is ready. */
.pt-root { --pt-line: #4a3b29; --pt-brass: #d9a441; --pt-gold: var(--c-amber-hi); }

/* the six stalls */
.pt-strip { display: flex; gap: 5px; margin: 0 0 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 1px 3px; }
.pt-strip::-webkit-scrollbar { display: none; }
.pt-slot { position: relative; flex: 1 1 0; min-width: 52px; display: grid; justify-items: center; gap: 0; padding: 4px 1px 5px; border-radius: 12px; color: var(--text);
  background: linear-gradient(#33291d, #211a12); border: 1px solid var(--pt-line); box-shadow: 0 3px 0 #0f0b07, inset 0 1px 0 rgba(255,230,180,.07); }
.pt-slot b { max-width: 100%; font: 800 11.5px/1.2 system-ui; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-slot small { font: 700 10.5px/1.2 system-ui; color: var(--muted); white-space: nowrap; }
.pt-thumbbox { display: block; width: 50px; height: 42px; max-width: 100%; overflow: hidden; margin-bottom: 1px; }
.pt-thumbbox.big { width: 96px; height: 74px; }
.pt-thumb { display: block; margin: 0 auto; filter: drop-shadow(0 2px 2px rgba(0,0,0,.55)); }
.pt-slot.on { background: linear-gradient(#5a4116, #2f220f); border-color: var(--pt-brass); box-shadow: 0 3px 0 #5a3f0c, 0 0 12px rgba(217,164,65,.35), inset 0 1px 0 rgba(255,230,160,.25); }
.pt-slot.on b { color: var(--pt-gold); } .pt-slot.on small { color: #e8d9b8; }
.pt-slot.locked { background: repeating-linear-gradient(-45deg, #241d15 0 8px, #1c1610 8px 16px); border-style: dashed; }
.pt-slot.locked b { color: #b9ab95; }
.pt-slot.locked.on { border-style: solid; border-color: var(--pt-brass); }
.pt-slot.ready small { color: var(--c-good-hi); font-weight: 800; }
.pt-slot .st { position: absolute; top: 1px; right: 4px; font: 900 13px/1 system-ui; font-style: normal; color: var(--pt-gold); text-shadow: 0 1px 1px #000; }

/* the animal in its pen */
.pt-stage { margin: 0 0 10px; border-radius: 14px; overflow: hidden; background: linear-gradient(#33291d, #211a12); border: 1px solid #6b4a17;
  box-shadow: 0 5px 14px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,220,150,.1); }
.pt-stage.s4 { border-color: var(--pt-brass); box-shadow: 0 5px 14px rgba(0,0,0,.5), 0 0 16px rgba(217,164,65,.3); }
.pt-shead { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 10px 6px 12px; }
.pt-name { display: grid; gap: 0; min-width: 0; }
.pt-name b { font: 900 19px/1.15 system-ui; color: #fff; text-shadow: 0 2px 0 #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-name small { font: 700 12px/1.2 system-ui; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-lv { flex: none; display: flex; align-items: baseline; gap: 2px; padding: 4px 10px; border-radius: 999px; background: #17120c; border: 1px solid rgba(217,164,65,.55); }
.pt-lv small { font: 800 10px/1 system-ui; letter-spacing: .08em; text-transform: uppercase; color: var(--pt-gold); }
.pt-lv small + b { margin-left: 5px; }
.pt-lv b { font: 900 17px/1 system-ui; color: #fff; } .pt-lv span { font: 700 12px/1 system-ui; color: var(--muted); }
.pt-view { position: relative; height: 176px; background: #2a2118; border-top: 1px solid #0f0b07; border-bottom: 1px solid #0f0b07; }
.pt-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pt-sfoot { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 7px 10px; }
.pt-stars { display: inline-flex; gap: 1px; } .pt-stars i { font: 900 16px/1 system-ui; font-style: normal; color: #3a3025; text-shadow: 0 1px 0 #000; }
.pt-stars i.cap { color: #6b5a3f; } .pt-stars i.on { color: var(--pt-gold); }
.pt-cp { padding: 2px 9px; border-radius: 999px; background: #17120c; border: 1px solid var(--pt-line); font: 800 12.5px/1.5 system-ui; color: var(--pt-gold); white-space: nowrap; }
.pt-comp { margin-left: auto; padding: 2px 10px; border-radius: 999px; font: 800 12px/1.5 system-ui; color: #2a1a04; background: linear-gradient(var(--c-amber-hi), #e3a03a); white-space: nowrap; }
.pt-quote, .pt-desc { font: italic 500 12.5px/1.4 system-ui; color: #cdbfa6; }
.pt-desc { padding: 0 12px 9px; }

/* cards */
.pt-body { display: grid; gap: 10px; }
.pt-card { border-radius: 14px; overflow: hidden; padding: 0 12px 12px; display: grid; gap: 8px; background: linear-gradient(#2c241a, #1e1811); border: 1px solid var(--pt-line); box-shadow: inset 0 1px 0 rgba(255,230,180,.05); }
.pt-card > h4 { margin: 0 -12px; padding: 7px 12px; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--pt-gold);
  background: linear-gradient(#3c2f1f, #2c241a); border-bottom: 1px solid #0f0b07; }
.pt-card > h4 span { color: #e3d8c4; letter-spacing: 0; text-transform: none; font-weight: 700; text-align: right; }
.pt-stat { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 9px; background: #17120c; border: 1px solid #33291d; font: 700 13.5px/1.3 system-ui; }
.pt-stat b { font: 900 15px/1.2 system-ui; color: var(--c-good-hi); white-space: nowrap; }
.pt-gains { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; } .pt-gains small { font: 700 12px/1.4 system-ui; color: var(--muted); }
.pt-gain { padding: 2px 8px; border-radius: 999px; background: #1f3a1c; color: var(--c-good-hi); font: 800 12px/1.5 system-ui; white-space: nowrap; }
.pt-gain.hot { background: #4a3a14; color: var(--pt-gold); }
.pt-tag { padding: 3px 9px; border-radius: 999px; background: #17120c; border: 1px solid var(--pt-line); font: 700 13px/1.4 system-ui; white-space: nowrap; }
.pt-why { font-size: 12.5px; line-height: 1.35; color: #f0c9a0; padding: 6px 9px; border-radius: 9px; background: #2a1d10; border: 1px dashed #8a5e1c; }
.pt-maxed { padding: 9px; border-radius: 10px; text-align: center; font: 900 15px/1.2 system-ui; color: #2a1a04; background: linear-gradient(var(--c-amber-hi), #e3a03a); }

/* feeding */
.pt-xp { position: relative; height: 24px; border-radius: 999px; overflow: hidden; background: #120e09; border: 1px solid var(--pt-line); }
.pt-xp i { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: linear-gradient(#c7e36a, #6fa52c); }
.pt-xp b { position: absolute; inset: 0; display: grid; place-items: center; font: 800 12.5px/1 system-ui; color: #fff; text-shadow: 0 1px 2px #000; }
.pt-adv { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.pt-adv .side { display: grid; gap: 1px; padding: 7px 10px; border-radius: 10px; background: #17120c; border: 1px solid #33291d; text-align: center; }
.pt-adv .side small { font: 700 10.5px/1.2 system-ui; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.pt-adv .side b { font: 900 15px/1.2 system-ui; } .pt-adv .side span { font: 700 12px/1.2 system-ui; color: var(--muted); }
.pt-adv .side.nx { border-color: var(--pt-brass); } .pt-adv .side.nx b { color: var(--pt-gold); }
.pt-adv .arr { font-size: 18px; color: var(--pt-gold); }

/* skill */
.pt-skhead { display: grid; grid-template-columns: 46px 1fr; gap: 10px; align-items: center; }
.pt-skhead .ic { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 12px; font-size: 24px; background: radial-gradient(circle at 35% 30%, #5a4116, #241a0c); border: 1px solid var(--pt-brass); box-shadow: 0 2px 0 #0f0b07; }
.pt-skhead .tx { display: grid; gap: 2px; min-width: 0; } .pt-skhead b { font: 900 15.5px/1.2 system-ui; color: #fff; }
.pt-skhead p { margin: 0; font: 500 12.5px/1.35 system-ui; color: #cdbfa6; }
.pt-skval { padding: 7px 10px; border-radius: 9px; background: #17120c; border: 1px solid #33291d; font: 800 13.5px/1.3 system-ui; color: var(--c-good-hi); }
.pt-skill.live { border-color: #5fae3a; box-shadow: 0 0 12px rgba(120,220,80,.22), inset 0 1px 0 rgba(255,230,180,.05); }
.pt-live { padding: 6px 10px; border-radius: 9px; background: #14241a; border: 1px solid #2f6a2a; font: 800 13px/1.3 system-ui; color: var(--c-good-hi); }
.pt-live b { color: #fff; }

/* how to get a locked one */
.pt-step { display: grid; grid-template-columns: 22px 1fr; gap: 8px; align-items: start; padding: 7px 10px; border-radius: 9px; background: #17120c; border: 1px solid #33291d; }
.pt-step i { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; font: 900 12px/1 system-ui; font-style: normal; color: #b9ab95; background: #2c241a; border: 1px solid var(--pt-line); }
.pt-step b { display: block; font: 700 13.5px/1.3 system-ui; } .pt-step small { display: block; font: 500 12px/1.35 system-ui; color: var(--muted); }
.pt-step.done { border-color: #2f6a2a; background: #14241a; } .pt-step.done i { color: #10200c; background: var(--c-good-hi); border-color: var(--c-good-hi); } .pt-step.done b { color: #c9f0b0; }

/* ration */
.pt-rrow { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.pt-rrow .pt-btn, .pt-next { margin-left: auto; }
.pt-next { font: 700 12.5px/1.3 system-ui; color: var(--muted); } .pt-next b { color: #fff; }

/* buttons (same shapes as the building popups) */
.pt-btns { display: grid; grid-template-columns: 1fr; gap: 10px; } .pt-btns.two { grid-template-columns: 1fr 1fr; }
.pt-btn { min-height: 50px; display: grid; place-content: center; justify-items: center; gap: 1px; padding: 6px 8px; border-radius: 12px; border: 0; font: 800 15px/1.15 system-ui;
  box-shadow: 0 4px 0 var(--sh, var(--c-ink)), inset 0 1px 0 rgba(255,255,255,.3); transition: transform .06s; }
.pt-btn:not(:disabled):active { transform: translateY(2px); box-shadow: 0 2px 0 var(--sh, var(--c-ink)), inset 0 1px 0 rgba(255,255,255,.3); }
.pt-btn small { font: 700 12px/1.1 system-ui; opacity: .92; }
.pt-btn.gold { background: linear-gradient(var(--c-amber-hi), #e3a03a); color: #2a1a04; --sh: #8a5e1c; }
.pt-btn.steel { background: linear-gradient(#6b5a45, #3a2f22); color: #fff; --sh: #0f0b07; }
.pt-btn.slim { min-height: 40px; padding: 4px 18px; }
.pt-btn:disabled { filter: grayscale(.7); opacity: .55; }

/* closed kennel */
.pt-closed { display: grid; justify-items: center; gap: 4px; padding: 18px 14px; margin-bottom: 10px; border-radius: 14px; text-align: center; background: repeating-linear-gradient(-45deg, #2a2118 0 10px, #231b13 10px 20px); border: 1px dashed #6b4a17; }
.pt-closed .lock { font-size: 30px; } .pt-closed b { font: 900 17px/1.2 system-ui; color: var(--pt-gold); } .pt-closed small { font: 500 13px/1.4 system-ui; color: #cdbfa6; max-width: 30ch; }
.pt-tease { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pt-tcard { display: grid; justify-items: center; gap: 2px; padding: 8px 4px; border-radius: 12px; text-align: center; background: linear-gradient(#2c241a, #1e1811); border: 1px solid var(--pt-line); min-width: 0; }
.pt-tcard b { font: 800 12.5px/1.2 system-ui; } .pt-tcard small { font: 500 11px/1.3 system-ui; color: var(--muted); }