/* Companion artwork beside growth information and a single row of collection shortcuts. */
html .pet-stage.companion-stage {
  grid-template-columns: 248px minmax(0, 1fr);
  gap: 40px;
  padding: 28px;
  align-items: center;
}
html .companion-stage .companion-visual { display: block; width: 248px; align-self: center; }
html .companion-stage .stage-character { width: 248px; height: 215px; }
html .companion-stage .pet-actor { width: 210px; height: 196px; left: calc(50% - 105px); }
.companion-stage .companion-touch-hint {
  margin: 14px 0 0;
  text-align: center;
  font-size: 11px;
  color: var(--muted);
}
.companion-stage .companion-eyebrow {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
}
html .companion-stage .companion-info { width: 100%; max-width: 780px; }
html .companion-stage .companion-title { gap: 10px; }
html .companion-stage .companion-title h2 { font-size: 26px; }
html .companion-stage .companion-growth {
  max-width: 420px;
  margin: 20px 0;
  gap: 9px;
}
html .companion-stage .growth-caption { font-size: 12px; }
html .companion-stage .companion-growth .progress { height: 5px; }
html .companion-stage .companion-actions { gap: 10px; }
html .companion-stage .companion-actions .button {
  min-width: 0;
  padding: 9px 15px;
  min-height: 42px;
  font-size: 13px;
}
html .companion-stage .companion-hint {
  display: block;
  margin-top: 10px;
  font-size: 11px;
  line-height: 1.8;
  text-wrap: pretty;
}
.companion-stage .intimacy-status {
  width: 100%;
  max-width: 420px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  gap: 12px;
}
.companion-stage .intimacy-status > .icon { margin-left: auto; flex: none; }
.companion-stage .intimacy-status strong { font-size: 13px; }
.companion-stage .intimacy-status small { font-size: 11px; }
.companion-stage .intimacy-hearts .icon { width: 17px; height: 17px; }
.companion-stage .companion-collection {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  min-width: 0;
  max-width: 560px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.companion-collection-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
  min-height: 36px;
  padding: 4px 0;
  text-align: left;
  color: var(--ink);
  background: transparent;
  border: 0;
}
.companion-link-icon { display: flex; color: var(--muted); flex: none; }
.companion-link-icon .icon { width: 17px; height: 17px; }
.companion-link-copy { min-width: 0; }
.companion-link-title { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 400; white-space: nowrap; }
.companion-link-count { white-space: nowrap; color: var(--muted); font-size: 12px; font-weight: 400; font-variant-numeric: tabular-nums; }
.companion-link-count b { font-size: inherit; font-weight: inherit; color: inherit; }
.companion-link-copy > small { display: none; }
.companion-collection-link > .icon { width: 12px; height: 12px; color: var(--muted); }
.companion-link-title .new-dot { margin-left: 0; flex: none; }
.companion-collection-link:hover { background: transparent; }
.companion-collection-link:hover .companion-link-title { text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 1100px) {
  html .pet-stage.companion-stage { gap: 24px 32px; padding: 24px; }
  .companion-stage .companion-collection { gap: 6px 18px; }
}
@media (max-width: 680px) {
  html .pet-stage.companion-stage { grid-template-columns: minmax(0, 1fr); padding: 24px 20px 16px; gap: 24px; }
  html .companion-stage .companion-visual { width: 248px; justify-self: center; align-self: center; }
  html .companion-stage .companion-info { width: 100%; }
  html .companion-stage .companion-title h2 { font-size: 24px; }
  html .companion-stage .companion-growth { max-width: none; }
  html .companion-stage .companion-actions { flex-wrap: wrap; }
  html .companion-stage .companion-actions .button { flex: 1 1 140px; }
  .companion-stage .intimacy-status { max-width: none; }
  .companion-stage .companion-collection { max-width: none; gap: 6px 16px; }
  .companion-link-title { font-size: 12px; }
}

/* Let spacing separate the home sections; only the active tab is underlined. */
html[data-theme] .growth-section { border-top: 0; margin-top: 28px; }
html[data-theme] .growth-tabs { border-bottom: 0; margin-bottom: 16px; }
html[data-theme] .task-board { border: 0; }
html[data-theme] .task-board-head { border-bottom: 0; }
.companion-stage .intimacy-status { border-top: 0; padding-top: 0; }
.companion-collection-link + .companion-collection-link { border: 0; }