/* Battle Pet overview only. Detail screens keep their existing structure and styling. */
body[data-page="pet"]:not([data-pet-view]){
  --pet-dash-gap:clamp(4px,.8dvh,8px);
  --pet-dash-small-gap:clamp(3px,.5dvh,6px);
  overflow:hidden;
  overscroll-behavior:none;
}

body[data-page="pet"]:not([data-pet-view]) .pet-shell{
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  gap:clamp(7px,1dvh,10px);
  height:calc(100dvh - 90px - env(safe-area-inset-bottom));
  min-height:0;
  padding:6px 10px;
  overflow:hidden;
}
body[data-page="pet"]:not([data-pet-view]) [data-pet-root]{height:100%;min-height:0}

/* Flatten the old card-oriented overview DOM into one dashboard grid. */
body[data-page="pet"]:not([data-pet-view]) .compact-pet{
  display:grid;
  grid-template-columns:minmax(112px,41%) minmax(0,59%);
  grid-template-rows:auto minmax(0,1fr) auto auto auto auto auto;
  column-gap:clamp(10px,2.6vw,14px);
  row-gap:var(--pet-dash-gap);
  height:100%;
  min-height:0;
  align-content:stretch;
}
body[data-page="pet"]:not([data-pet-view]) .compact-pet>.compact-pet-card,
body[data-page="pet"]:not([data-pet-view]) .compact-pet-identity,
body[data-page="pet"]:not([data-pet-view]) .compact-pet-copy{
  display:contents!important;
}

/* Dynamic pet-name nameplate. */
body[data-page="pet"]:not([data-pet-view]) .compact-pet-copy .pet-name{
  grid-column:1/-1;
  grid-row:1;
  display:grid;
  min-width:0;
  height:clamp(46px,6.6dvh,58px);
  margin:0!important;
  place-items:center;
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--active-faction) 82%,var(--line));
  background:color-mix(in srgb,var(--active-faction) 10%,#171411);
  padding:4px 12px;
  color:var(--ink);
  font-size:clamp(28px,8.4vw,40px);
  font-weight:950;
  line-height:1;
  text-align:center;
  text-overflow:ellipsis;
  white-space:nowrap;
  text-shadow:0 0 8px rgb(255 255 255 / 12%);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--active-faction) 9%,transparent),0 0 14px color-mix(in srgb,var(--active-faction) 7%,transparent);
}

/* Hero: pet-art stage on the left, four live stat meters on the right. */
body[data-page="pet"]:not([data-pet-view]) .compact-pet-art{
  position:relative;
  grid-column:1;
  grid-row:2;
  display:grid!important;
  min-width:0;
  min-height:0;
  align-content:center;
  justify-items:center;
  align-self:stretch;
  aspect-ratio:auto!important;
  border:0!important;
  background:transparent!important;
  color:var(--active-faction)!important;
  overflow:hidden;
}
body[data-page="pet"]:not([data-pet-view]) .compact-pet-art .team-insignia{
  width:clamp(84px,25vw,128px)!important;
  height:clamp(84px,25vw,128px)!important;
  max-width:78%;
  max-height:72%;
  opacity:.52;
  filter:drop-shadow(0 0 8px color-mix(in srgb,var(--active-faction) 30%,transparent));
}
body[data-page="pet"]:not([data-pet-view]) .compact-pet-art>span{
  margin-top:clamp(3px,.6dvh,6px);
  color:color-mix(in srgb,var(--active-faction) 62%,var(--muted));
  font-family:var(--game-ui-font,ui-monospace,SFMono-Regular,Consolas,monospace);
  font-size:clamp(7px,1.9vw,9px);
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

body[data-page="pet"]:not([data-pet-view]) .compact-stat-grid{
  grid-column:2;
  grid-row:2;
  display:grid!important;
  grid-template-columns:1fr!important;
  grid-template-rows:repeat(4,minmax(0,1fr));
  gap:var(--pet-dash-small-gap)!important;
  min-width:0;
  min-height:0;
  margin:0!important;
  align-self:stretch;
}
body[data-page="pet"]:not([data-pet-view]) .compact-stat-card{
  display:grid;
  grid-template-rows:auto auto;
  align-content:center;
  min-width:0;
  min-height:0;
  border:0!important;
  background:transparent!important;
  padding:0!important;
  box-shadow:none!important;
}
/* DOM order is Charisma / Stamina / Strength / Loyalty; mockup order is Strength / Stamina / Charisma / Loyalty. */
body[data-page="pet"]:not([data-pet-view]) .compact-stat-card:nth-child(1){order:3}
body[data-page="pet"]:not([data-pet-view]) .compact-stat-card:nth-child(2){order:2}
body[data-page="pet"]:not([data-pet-view]) .compact-stat-card:nth-child(3){order:1}
body[data-page="pet"]:not([data-pet-view]) .compact-stat-card:nth-child(4){order:4}
body[data-page="pet"]:not([data-pet-view]) .compact-stat-card .stat-value{display:none}
body[data-page="pet"]:not([data-pet-view]) .compact-stat-card .stat-top{
  display:block;
  min-width:0;
}
body[data-page="pet"]:not([data-pet-view]) .compact-stat-card .stat-top strong{
  display:block;
  overflow:hidden;
  color:var(--ink);
  font-family:var(--game-ui-font,ui-monospace,SFMono-Regular,Consolas,monospace);
  font-size:clamp(16px,4.8vw,22px);
  font-weight:1000;
  line-height:.96;
  text-overflow:ellipsis;
  text-transform:none;
  white-space:nowrap;
  letter-spacing:-.04em;
}
body[data-page="pet"]:not([data-pet-view]) .compact-stat-card .stat-meter{
  display:grid;
  grid-template-columns:repeat(10,minmax(0,1fr));
  gap:2px;
  width:100%;
  min-width:0;
  margin-top:clamp(2px,.35dvh,4px)!important;
}
body[data-page="pet"]:not([data-pet-view]) .compact-stat-card .stat-tick{
  height:clamp(8px,1.35dvh,12px)!important;
  min-width:0;
  border:0!important;
}

/* Level + XP: level only, then the thin progress track. */
body[data-page="pet"]:not([data-pet-view]) .pet-level-row{
  grid-column:1/-1;
  grid-row:3;
  display:flex;
  min-height:0;
  justify-content:flex-start;
  margin:0;
  color:var(--active-faction);
}
body[data-page="pet"]:not([data-pet-view]) .pet-level-row strong{
  color:var(--active-faction);
  font-family:var(--game-ui-font,ui-monospace,SFMono-Regular,Consolas,monospace);
  font-size:clamp(10px,2.8vw,13px);
}
body[data-page="pet"]:not([data-pet-view]) .pet-level-row>span{display:none}
body[data-page="pet"]:not([data-pet-view]) .pet-xp-track{
  grid-column:1/-1;
  grid-row:4;
  width:100%;
  height:clamp(5px,.75dvh,7px);
  margin:0!important;
  border-color:color-mix(in srgb,var(--active-faction) 62%,var(--line));
  background:#111419;
}

/* HP is deliberately heavier than XP, with labels underneath the cells. */
body[data-page="pet"]:not([data-pet-view]) .compact-pet-copy .hp-bar{
  grid-column:1/-1;
  grid-row:5;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(3px,.8vw,5px);
  width:100%;
  margin:0!important;
}
body[data-page="pet"]:not([data-pet-view]) .compact-pet-copy .hp-cell{
  height:clamp(17px,2.35dvh,23px)!important;
  border-color:color-mix(in srgb,var(--active-faction) 58%,var(--line))!important;
}
body[data-page="pet"]:not([data-pet-view]) .compact-pet-copy .hp-head{
  grid-column:1/-1;
  grid-row:6;
  display:flex;
  margin:0!important;
  color:var(--ink);
  font-size:clamp(10px,2.8vw,13px);
  font-weight:950;
}
body[data-page="pet"]:not([data-pet-view]) .compact-pet-copy .pet-down{
  grid-column:1/-1;
  grid-row:2;
  z-index:3;
  align-self:end;
  margin:0 0 4px!important;
}

/* Large launchers, scaled as part of the whole dashboard rather than fixed-size blocks. */
body[data-page="pet"]:not([data-pet-view]) .pet-launchers{
  grid-column:1/-1;
  grid-row:7;
  display:grid;
  gap:clamp(5px,.8dvh,8px);
  min-width:0;
  min-height:0;
  margin:0!important;
}
body[data-page="pet"]:not([data-pet-view]) .pet-launcher{
  display:grid;
  grid-template-columns:minmax(0,1fr) 24px;
  height:clamp(48px,7.5dvh,66px);
  min-height:0!important;
  align-items:center;
  padding:6px 14px;
  border:1px solid color-mix(in srgb,var(--active-faction) 76%,var(--line));
  background:color-mix(in srgb,var(--active-faction) 7%,#171411);
  color:var(--active-faction);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--active-faction) 10%,transparent),0 0 14px color-mix(in srgb,var(--active-faction) 8%,transparent);
}
body[data-page="pet"]:not([data-pet-view]) .pet-launcher>span:first-child{
  display:block;
  width:min(62%,190px);
  justify-self:center;
  text-align:center;
}
body[data-page="pet"]:not([data-pet-view]) .pet-launcher strong{
  display:block;
  color:var(--active-faction);
  font-family:var(--game-ui-font,ui-monospace,SFMono-Regular,Consolas,monospace);
  font-size:clamp(18px,5.6vw,26px);
  font-weight:1000;
  line-height:1;
  letter-spacing:.06em;
  text-transform:uppercase;
  text-shadow:0 0 7px color-mix(in srgb,var(--active-faction) 34%,transparent);
}
body[data-page="pet"]:not([data-pet-view]) .pet-launcher small{display:none}
body[data-page="pet"]:not([data-pet-view]) .pet-launcher .chev{
  justify-self:end;
  color:var(--muted)!important;
  font-size:clamp(23px,6vw,28px);
  line-height:1;
}
body[data-page="pet"]:not([data-pet-view]) .pet-launcher:nth-child(1){order:1}
body[data-page="pet"]:not([data-pet-view]) .pet-launcher:nth-child(2){order:3}
body[data-page="pet"]:not([data-pet-view]) .pet-launcher:nth-child(3){order:2}

@media(max-width:360px){
  body[data-page="pet"]:not([data-pet-view]) .pet-shell{padding-inline:8px}
  body[data-page="pet"]:not([data-pet-view]) .compact-pet{grid-template-columns:minmax(98px,39%) minmax(0,61%);column-gap:9px}
  body[data-page="pet"]:not([data-pet-view]) .compact-pet-copy .pet-name{font-size:clamp(26px,8vw,34px)}
  body[data-page="pet"]:not([data-pet-view]) .compact-stat-card .stat-top strong{font-size:clamp(15px,4.6vw,19px)}
  body[data-page="pet"]:not([data-pet-view]) .pet-launcher>span:first-child{width:min(66%,175px)}
  body[data-page="pet"]:not([data-pet-view]) .pet-launcher strong{font-size:clamp(17px,5.4vw,22px)}
}

@media(max-height:700px){
  body[data-page="pet"]:not([data-pet-view]){--pet-dash-gap:4px;--pet-dash-small-gap:2px}
  body[data-page="pet"]:not([data-pet-view]) .pet-shell{gap:6px;padding-top:4px}
  body[data-page="pet"]:not([data-pet-view]) .compact-pet-copy .pet-name{height:44px}
  body[data-page="pet"]:not([data-pet-view]) .compact-stat-card .stat-tick{height:8px!important}
  body[data-page="pet"]:not([data-pet-view]) .pet-launcher{height:46px}
  body[data-page="pet"]:not([data-pet-view]) .pet-launcher strong{font-size:18px}
}

@media(max-height:620px){
  body[data-page="pet"]:not([data-pet-view]) .compact-pet-copy .pet-name{height:40px;font-size:25px}
  body[data-page="pet"]:not([data-pet-view]) .compact-pet-art .team-insignia{max-height:62%}
  body[data-page="pet"]:not([data-pet-view]) .compact-stat-card .stat-top strong{font-size:15px}
  body[data-page="pet"]:not([data-pet-view]) .compact-pet-copy .hp-cell{height:15px!important}
  body[data-page="pet"]:not([data-pet-view]) .pet-launcher{height:42px;padding-block:4px}
  body[data-page="pet"]:not([data-pet-view]) .pet-launcher strong{font-size:16px}
}