/* The pets page: summary bar, filters, tiles and one big card. --tier is the pet's rarity colour. */
.pets3 { display:flex; flex-direction:column; gap:10px; color:var(--ink); }
.pets3 .pets3-top { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.pets3 .pets3-stock { display:flex; align-items:center; gap:8px; min-height:52px; padding:6px 12px; background:#fff8ea; border:2px solid #e2cf9f; border-radius:12px; }
.pets3 .pets3-stock > span { display:flex; flex-direction:column; line-height:1.25; }
.pets3 .pets3-stock small { font-size:11px; color:var(--ink-soft); }
.pets3 .pets3-stock b { font-size:17px; }
.pets3 .pets3-stock img,.pets3 .pets3-dust img { image-rendering:pixelated; }
.pets3 .pets3-dust { display:grid; place-items:center; width:32px; height:32px; }
.pets3 .pets3-help-btn { flex:none; margin-left:auto; min-height:44px; padding:0 18px; }
.pets3 .pets3-stock .btn { flex:none; padding:0 14px; }
.pets3 .pets3-help { padding:10px 14px; font-size:13px; line-height:1.75; background:#fffdf3; border:2px dashed #d8bf86; border-radius:12px; }
.pets3 .pets3-help p { margin:0; }
.pets3 .pets3-help ul { margin:6px 0 0; padding-left:20px; }

.pets3 .pets3-filters { display:flex; flex-wrap:wrap; gap:6px; }
.pets3 .pets3-chip { display:flex; align-items:center; gap:6px; min-height:40px; padding:6px 14px; font:inherit; font-size:14px; color:var(--ink); background:#fffdf6; border:2px solid #e2cf9f; border-radius:999px; cursor:pointer; }
.pets3 .pets3-chip small { padding:0 7px; font-size:12px; background:#efe0bb; border-radius:999px; }
.pets3 .pets3-chip.on { color:#fff; font-weight:700; background:var(--green); border-color:var(--green-dark); }
.pets3 .pets3-chip.on small { background:rgba(255,255,255,.28); }

.pets3 .pets3-main { display:grid; grid-template-columns:minmax(0,1fr) minmax(360px,460px); gap:12px; align-items:start; }
.pets3 .pets3-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(100px,1fr)); gap:8px; align-content:start; padding:2px; }
.pets3 .pets3-empty { grid-column:1/-1; }
.pets3 .pets3-tile { position:relative; display:flex; flex-direction:column; align-items:center; gap:2px; min-height:122px; padding:8px 4px 6px; font:inherit; color:var(--ink); background:#fff8ea; border:2px solid #e2cf9f; border-bottom:5px solid var(--tier); border-radius:12px; cursor:pointer; }
.pets3 .pets3-tile:hover { background:#fffdf6; }
.pets3 .pets3-tile.sel { background:#fffdf6; border-color:var(--tier); box-shadow:0 0 0 3px color-mix(in srgb,var(--tier) 40%,transparent); }
.pets3 .pets3-tile-art { display:grid; place-items:center; width:68px; height:68px; border-radius:10px; background:radial-gradient(circle at 50% 62%,color-mix(in srgb,var(--tier) 34%,#fff) 0,#fff4da 72%); }
.pets3 .pets3-tile-art img,.pets3 .pets3-portrait img { image-rendering:pixelated; }
.pets3 .pets3-tile > b { font-size:13px; line-height:1.3; text-align:center; }
.pets3 .pets3-tile-stars { display:flex; align-items:center; gap:3px; font-size:12px; color:var(--ink-soft); }
.pets3 .pets3-tile-stars img { image-rendering:pixelated; }
.pets3 .pets3-tile.missing { background:#f3e9d2; }
.pets3 .pets3-tile.missing .pets3-tile-art img { filter:grayscale(1) brightness(.55) opacity(.5); }
.pets3 .pets3-badge { position:absolute; top:4px; right:4px; padding:1px 7px; font-size:11px; font-style:normal; font-weight:700; color:#fff; background:var(--green-dark); border-radius:999px; }
.pets3 .pets3-badge.hungry { background:var(--red); }

.pets3 .pets3-detail { display:flex; flex-direction:column; gap:10px; padding:14px; background:#fffdf6; border:3px solid var(--tier); border-radius:16px; box-shadow:0 3px 0 rgba(122,74,43,.18); }
.pets3 .pets3-head { display:flex; align-items:center; gap:12px; }
.pets3 .pets3-portrait { display:grid; place-items:center; flex:0 0 136px; height:136px; border:2px solid var(--tier); border-radius:14px; background:radial-gradient(circle at 50% 62%,color-mix(in srgb,var(--tier) 38%,#fff) 0,#fff4da 74%); }
.pets3 .pets3-title { min-width:0; }
.pets3 .pets3-title h3 { margin:0; font-size:22px; line-height:1.3; }
.pets3 .pets3-tags { display:flex; flex-wrap:wrap; gap:4px; margin:4px 0; }
.pets3 .pets3-tier,.pets3 .pets3-role,.pets3 .pets3-count { padding:2px 9px; font-size:12px; border-radius:999px; }
.pets3 .pets3-tier { font-weight:700; color:#fff; background:var(--tier); text-shadow:0 1px 0 rgba(0,0,0,.3); }
.pets3 .pets3-role { background:#efe0bb; }
.pets3 .pets3-count { background:#e3f1d6; }
.pets3 .pets3-stars { display:flex; gap:1px; }
.pets3 .pets3-stars i { display:block; opacity:.25; filter:grayscale(1); }
.pets3 .pets3-stars i.on { opacity:1; filter:none; }
.pets3 .pets3-stars img { display:block; image-rendering:pixelated; }
.pets3 .pets3-power { margin-top:4px; font-size:13px; }
.pets3 .pets3-power b { font-size:19px; }
.pets3 .pets3-power small { color:var(--ink-soft); }

.pets3 .pets3-status { display:grid; gap:6px; }
.pets3 .pets3-bar { display:grid; grid-template-columns:150px 1fr; align-items:center; gap:8px; font-size:13px; }
.pets3 .pets3-bar i { display:block; height:12px; overflow:hidden; background:#efe0bb; border-radius:6px; }
.pets3 .pets3-bar b { display:block; height:100%; background:var(--green); border-radius:6px; }
.pets3 .pets3-bar.bond b { background:#ef7fae; }
.pets3 .pets3-hungry { margin:0; padding:8px 10px; font-size:13px; font-weight:700; color:var(--red-dark); background:#fde3dd; border:2px solid var(--red); border-radius:10px; }
.pets3 .pets3-actions { display:flex; gap:8px; }
.pets3 .pets3-actions .btn { flex:1; min-height:46px; }
.pets3 .pets3-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.pets3 .pets3-stats div { padding:6px 4px; text-align:center; background:#fff8ea; border:1px solid #e2cf9f; border-radius:10px; }
.pets3 .pets3-stats small { display:block; font-size:11px; color:var(--ink-soft); }
.pets3 .pets3-stats b { font-size:17px; }
.pets3 .pets3-skills { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.pets3 .pets3-skill { padding:8px 10px; background:#fff8ea; border:1px solid #e2cf9f; border-radius:12px; }
.pets3 .pets3-skill small { display:block; font-size:11px; color:var(--ink-soft); }
.pets3 .pets3-skill b { font-size:15px; }
.pets3 .pets3-skill p { margin:4px 0 0; font-size:12px; line-height:1.55; }
.pets3 .pets3-unlock { color:var(--ink-soft); }
.pets3 .pets3-unlock.done { font-weight:700; color:var(--green-dark); }
.pets3 .pets3-ride { display:flex; align-items:center; gap:6px; margin:0; font-size:13px; color:var(--ink-soft); }
.pets3 .pets3-get { padding:8px 10px; background:#fff8ea; border:2px dashed var(--tier); border-radius:12px; }
.pets3 .pets3-get p { margin:4px 0; font-size:13px; line-height:1.6; }
.pets3 .pets3-likes { display:flex; flex-wrap:wrap; gap:6px; font-size:12px; }
.pets3 .pets3-likes span { display:flex; align-items:center; gap:3px; padding:2px 8px; background:#fffdf6; border:1px solid #e2cf9f; border-radius:999px; }

.pets3 .pets3-box { display:flex; flex-direction:column; gap:6px; padding:8px 10px; background:#fff8ea; border:2px solid #e2cf9f; border-radius:12px; }
.pets3 .pets3-box.star { background:#fff3cf; border-color:#e0b64a; }
.pets3 .pets3-box.max { flex-direction:row; align-items:center; background:#fff3cf; border-color:#e0b64a; }
.pets3 .pets3-box-head { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px; }
.pets3 .pets3-box-head small { font-size:12px; color:var(--ink-soft); }
.pets3 .pets3-foods { display:flex; flex-wrap:wrap; gap:6px; }
.pets3 .pets3-food { display:flex; align-items:center; gap:4px; min-height:42px; padding:4px 8px; font:inherit; font-size:12px; color:var(--ink); background:#fffdf6; border:2px solid #e2cf9f; border-radius:10px; cursor:pointer; }
.pets3 .pets3-food.on { background:#e8f5d8; border-color:var(--green-dark); }
.pets3 .pets3-food small { color:var(--ink-soft); }
.pets3 .pets3-food img { image-rendering:pixelated; }
.pets3 .pets3-feed-row { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.pets3 .pets3-feed-row > small { flex:1; color:var(--ink-soft); }
.pets3 .pets3-feed-row .btn { flex:none; min-height:44px; padding:0 18px; }
.pets3 .pets3-gain { margin:0; font-size:13px; }
.pets3 .pets3-cost { display:flex; align-items:center; gap:4px; font-weight:700; }
.pets3 .pets3-cost img { image-rendering:pixelated; }
.pets3 .pets3-cost.short { color:var(--red); }
.pets3 .pets3-box.star .btn { flex:none; margin-left:auto; min-width:120px; padding:0 18px; }

/* A tall enough window: the tiles and the card scroll on their own, side by side. */
@media (min-width:700px) and (min-height:600px) {
  .panel .body:has(> .inventory-library > .pets3) { display:flex; flex-direction:column; overflow:hidden; }
  .inventory-library:has(> .pets3) { display:flex; flex:1; min-height:0; flex-direction:column; }
  .pets3 { flex:1; min-height:0; }
  .pets3 .pets3-main { flex:1; min-height:0; align-items:stretch; }
  .pets3 .pets3-grid,.pets3 .pets3-detail { min-height:0; overflow-y:auto; overscroll-behavior:contain; }
}
/* Phones: the tiles become one row to swipe, the card below. */
@media (max-width:699px) {
  .pets3 .pets3-main { grid-template-columns:minmax(0,1fr); }
  .pets3 .pets3-grid { display:flex; gap:6px; padding:2px 2px 8px; overflow-x:auto; touch-action:pan-x pan-y; scroll-snap-type:x proximity; }
  .pets3 .pets3-tile { flex:0 0 94px; min-height:116px; scroll-snap-align:start; }
  .pets3 .pets3-detail { padding:10px; }
  .pets3 .pets3-head { align-items:flex-start; }
  .pets3 .pets3-portrait { flex-basis:132px; height:132px; }
  .pets3 .pets3-title h3 { font-size:19px; }
  .pets3 .pets3-skills { grid-template-columns:minmax(0,1fr); }
  .pets3 .pets3-bar { grid-template-columns:118px 1fr; }
  .pets3 .pets3-stock { padding:4px 10px; min-height:46px; }
  .pets3 .pets3-top { gap:6px; }
  .pets3 .pets3-help-btn { min-height:40px; padding:0 12px; font-size:13px; }
  .pets3 .pets3-filters { flex-wrap:nowrap; overflow-x:auto; padding-bottom:2px; touch-action:pan-x pan-y; }
  .pets3 .pets3-chip { flex:none; min-height:38px; padding:4px 10px; font-size:13px; }
  .pets3 .pets3-stock.pity { display:none; }
}

.pet-v2-exchange select { color:var(--ink); background:#fffdf6; border:1px solid #c9a96b; border-radius:6px; padding:10px; max-width:100%; }
.pet-v2-exchange .btn { min-height:44px; }
.pet-v2-controls { position:absolute; right:12px; bottom:calc(202px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; gap:6px; max-width:180px; pointer-events:auto; }
.pet-v2-controls[hidden],.pet-v2-controls button[hidden] { display:none; }
.pet-v2-controls .btn { min-height:44px; font-size:13px; padding:8px; }
@media(max-width:600px) { .pet-v2-controls { right:8px; max-width:150px; } }
body.touch.upright .pet-v2-controls { left:var(--gap); right:var(--gap); bottom:calc(var(--safe-b) + 190px); flex-direction:row; max-width:none; justify-content:center; }
body.touch.upright #hud:has(.pet-v2-controls:not([hidden])) .hotbar { bottom:calc(var(--gap) + var(--safe-b) + 240px); }
body.touch.upright #hud:has(.pet-v2-controls:not([hidden])) .target,
body.touch.upright #hud:has(.pet-v2-controls:not([hidden])) .bossbar { bottom:calc(var(--gap) + var(--safe-b) + 312px); }
body.touch.upright #hud:has(.pet-v2-controls:not([hidden])) .worldboss { bottom:calc(var(--gap) + var(--safe-b) + 370px); }
body.stick-right .pet-v2-controls { right:auto; left:12px; }

/* the pet skill button: name, and what it does under it; the guard line while a rebirth or a shield is on */
.pet-v2-controls .pet-v2-active { display:grid; gap:1px; line-height:1.2; text-align:center; }
.pet-v2-controls .pet-v2-active small { font-size:11px; font-weight:600; opacity:.85; }
.pet-v2-guard { padding:6px 8px; border-radius:10px; background:rgba(43,31,46,.82); color:#ffe9a8; font-size:12px; font-weight:700; line-height:1.3; text-align:center; }
.pet-v2-guard[hidden] { display:none; }
/* riding: the pet button is the mount's dash (พุ่งทะยาน, 8 and 9 stars) */
.pet-v2-controls .pet-v2-active.boost { background: linear-gradient(#ffe68a, #f2a93b); border-color: #b9741a; color: #4a2a05; }
.pet-v2-controls .pet-v2-active.boost:disabled { filter: grayscale(.45); opacity: .85; }